I find that setting textAlign to a fabric.js Text object is useless because the width of the textfield is automatically assigned to perfectly fit the width of the text.

I can't find anything in the API that lets me set another width. I tried scaleToWidth, but it didn't to anything either.

this.text = new fabric.Text(this.name, 
{
        fontFamily: 'Calibri Light',
        fontSize: 17,
        backgroundColor: 'blue', // using this to confirm that the width is actually just set to the text width
        textAlign: 'center',
        top: 15,
        scaleToWidth: 1.1,
})

I've made it appear in the desired way using a pretty hacky solution.

Quoting from the fabric.js website:

textAlign

Text align es useful when working with multiline text. With one-line text, the width of bounding box is always exactly matching that line's width, so there's nothing to align. Allowed values are "left", "center", and "right".

Does anyone know how to get around this?

I find that setting textAlign to a fabric.js Text object is useless because the width of the textfield is automatically assigned to perfectly fit the width of the text.

I can't find anything in the API that lets me set another width. I tried scaleToWidth, but it didn't to anything either.

this.text = new fabric.Text(this.name, 
{
        fontFamily: 'Calibri Light',
        fontSize: 17,
        backgroundColor: 'blue', // using this to confirm that the width is actually just set to the text width
        textAlign: 'center',
        top: 15,
        scaleToWidth: 1.1,
})

I've made it appear in the desired way using a pretty hacky solution.

Quoting from the fabric.js website:

textAlign

Text align es useful when working with multiline text. With one-line text, the width of bounding box is always exactly matching that line's width, so there's nothing to align. Allowed values are "left", "center", and "right".

Does anyone know how to get around this?

• javascript
• jquery
• html
• fabricjs
• text-alignment

Share Improve this question Follow edited Aug 16, 2015 at 8:44 user3262713 asked Jul 15, 2015 at 11:01 user3262713user3262713 37999 silver badges2121 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Not sure if you ever found an answer in the two years from when you first asked but I had the same problem and was able to find a solve by adding the text object to the canvas then setting it's width and then firing a renderAll() on the canvas.

var text = new fabric.Text('sample text', {fill: '#fff', textAlign: 'center'});
canvas.add(text);
text.width = 180;
canvas.renderAll();