How to set the width of Textbox using FabricJS?

FabricJSHTML5 CanvasJavascript

In this tutorial, we are going to learn how to set the width of a Textbox using FabricJS. We can customize, stretch or move around the text written in a textbox. In order to create a textbox, we will have to create an instance of fabric.Textbox class and add it to the canvas. However, one of the fundamental properties of textbox is width which specifies the horizontal width of the textbox.

Syntax

new fabric.Textbox(text: String, { width: Number }: Object)

Parameters

  • text − This parameter accepts a String which is the text string that we want to display inside our textbox.

  • options (optional) − This parameter is an Object which provides additional customizations to our textbox. Using this parameter, properties such as colour, cursor, stroke width and a lot of other properties can be changed related to the object of which width is a property.

Options Keys

  • width − This property accepts a Number value. The value that is assigned determines the width of the textbox.

Example 1

Default behaviour or when width property is not specified

Let’s see a code example to understand how the object behaves when the width property is not specified. Each word is treated as a new line because width isn’t specified. The height of textbox is adjusted automatically based on the wrapping of lines.

<!DOCTYPE html> <html> <head> <!-- Adding the Fabric JS Library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Default behaviour or when width property is not specified</h2> <p>You can see that each word is treated as a new line since the width hasn't been specified</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a textbox object var textbox = new fabric.Textbox("All generalizations are false, including this one.", { left: 50, top: 45, fill: "orange", stroke: "green", }); // Add it to the canvas canvas.add(textbox); </script> </body> </html>

Example 2

Passing width property as key

In this example, we are assigning a value to the width property. In this case, we are manually specifying a horizontal width for our textbox and thus the lines will get adjusted accordingly.

<!DOCTYPE html> <html> <head> <!-- Adding the Fabric JS Library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Passing width property as key</h2> <p>You can see that the horizontal width now has a fixed value of 400</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a textbox object var textbox = new fabric.Textbox("All generalizations are false, including this one.", { left: 50, top: 45, fill: "orange", stroke: "green", width: 400, }); // Add it to the canvas canvas.add(textbox); </script> </body> </html>
raja
Updated on 02-Aug-2022 14:26:35

Advertisements