Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set the width of Textbox using FabricJS?
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>
Key Points
Without specifying width, each word wraps to a new line automatically
The width property accepts numeric values in pixels
Setting width controls text wrapping behavior within the textbox
The textbox height adjusts automatically based on content and width
Conclusion
The width property in FabricJS textboxes controls horizontal dimensions and text wrapping. Use it to create consistent layouts and control how text flows within your canvas elements.
949 Views
