Fabric.js's default text component does not support automatic text wrapping. To enable this feature, use the Textbox object with the splitByGrapheme property set to true.

Basic Implementation

Initialize a Textbox with a defined width and enable grapheme splitting:

const canvas = new fabric.Canvas('canvasElement');

const textbox = new fabric.Textbox('Sample text', {
  width: 300,
  left: 50,
  top: 50,
  splitByGrapheme: true
});

canvas.add(textbox);

Alternative Configuraton

The property can also be set after initialization:

const textbox = new fabric.Textbox('Sample text', { width: 300 });
textbox.splitByGrapheme = true;

Width Considerations

Without expliict width specification, the textbox defaults to single-character width:

const textbox = new fabric.Textbox('Sample text', {
  splitByGrapheme: true
});

Runtime Adjustments

The textbox dynamically adjusts wrapping when resized interactively, provided splitByGrapheme remains enabled.

Height Control

To prevent vertical distortion, disable vertical scaling controls:

textbox.setControlVisible('mt', false); // Disable top-middle control
textbox.setControlVisible('mb', false); // Disable bottom-middle control

Available control points include: tl, tr, br, bl, ml, mt, mr, mb, mtr.

Default Behavior

Without splitByGrapheme, text won't wrap but will maintain proportions during horizontal scaling. The minimum width equals the longest line's width.