Fabric.js Text textAlign Property

When working with text in Fabric.js, the textAlign property can be used to control the horizontal alignment of text within the bounding box of a text object.

The textAlign property accepts one of the following string values:

• left: Aligns the text to the left edge of the bounding box.
• center: Centers the text horizontally within the bounding box.
• right: Aligns the text to the right edge of the bounding box.

Example

Here's an example of how the textAlign property can be used to left-align text within a Fabric.js text object:

var canvas = new fabric.Canvas('canvas');

var text = new fabric.Text('Left-aligned text', {
  left: 50,
  top: 50,
  fontSize: 20,
  textAlign: 'left'
});

canvas.add(text);

In this example, the textAlign property is set to 'left' in the fabric.Text constructor, which aligns the text to the left edge of the bounding box.

Conclusion

Using the textAlign property in Fabric.js makes it easy to control the horizontal alignment of text within a text object. Whether you need left-aligned, centered, or right-aligned text, Fabric.js provides a simple and intuitive way to achieve the desired effect.