Fabric.js Itext cornerSize Attribute

Fabric.js is a powerful and easy-to-use JavaScript library for working with canvas. It provides a lot of useful features for creating interactive and dynamic graphics on the web.

One of the important features of Fabric.js is the Itext object, which allows you to add editable text to your canvas. The Itext object has a cornerSize attribute that enables you to set the size of the corners of a text box.

Introduction to Itext cornerSize Attribute

The cornerSize attribute is a numeric value that represents the size of the corners of a text box. The value can be set for all four corners or individually for each corner. When the cornerSize is set to a value greater than 0, it creates a rounded corner effect.

The cornerSize attribute can be set using the following methods:

Set the cornerSize for all four corners

textObj.set({ cornerSize: 10 });

Set the cornerSize for each corner individually

textObj.set({
  cornerSize: {
    tl: 10, // Top-Left corner
    tr: 20, // Top-Right corner
    br: 30, // Bottom-Right corner
    bl: 40 // Bottom-Left corner
  }
});

Example Code for Itext cornerSize Attribute in Fabric.js

// Create a new Itext object with some text
var text = new fabric.IText('Hello Fabric.js', {
  left: 100,
  top: 100,
  fontFamily: 'Arial',
  fontSize: 24,
  fontWeight: 'bold',
  fill: '#000'
});

// Set the cornerSize for all four corners
text.set({ cornerSize: 10 });

// Add the text object to the canvas
canvas.add(text);

Conclusion

By using the Itext object in Fabric.js and setting the cornerSize attribute, you can easily add rounded corners to your text boxes. This feature can be really helpful when creating designs with a more polished and professional look, and it's yet another reason why Fabric.js is such a great choice for working with canvas.