How can we set MaxWidth in fabric.js canvas Textbox ?

[MrShaikh01]

Hi , Need a small help. How can we set the MaxWidth and dynamic width while adding text using fabric.Textbox method.

If we can't use MaxWidth then can anyone help me with any alternative of this.

[pidugusundeep]

I hope this will help http://fabricjs.com/docs/fabric.Textbox.html#width

[MrShaikh01]

Thanks @pidugusundeep but i have tried that i was not able to set MaxWidth with Width, i have a case where canvas's size will be different so need to set dynamic width to textbox and also textbox width should not go outside the canvas border.

[asturur]

We do not have maxWidth for text.
How that would be have when words are too long? clip? stop accepting inputs.
It sounds a custom implementation for a custom application.

What you can do out of the box for non smart maxWidth is to enable the splitByGrapheme option in the textbox, and that will respect the width.
But it will break words with any character.

[asturur]

http://fabricjs.com/docs/global.html#splitByGrapheme

[ascruggs]

Not a perfect solution, but incase someone else comes looking, if you add a custom attribute called maxWidth to an object, this works:

    if(object.maxWidth === undefined) return null 
    object.on('changed', function(e) {
      if (object.width <= object.maxWidth) return null
      var scaleFactor = object.maxWidth / object.width;
      // Apply the scale transformation
      object.scale(scaleFactor);
      object.setCoords();  // Update the object's coordinates after scaling
      canvas.renderAll(); 
    });
  }```