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

1 Answer 1

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();