Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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>
569 Views
