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 create a canvas with Textbox using FabricJS?
In this tutorial, we are going to learn about how to create a canvas with a Textbox object using FabricJS. We can customize, stretch or move around the text written in a textbox. We can also customize the text itself by using properties like fontSize, fontFamily, fontStyle, fontWeight, etc. In order to create a textbox, we will have to create an instance of fabric.Textbox class and add it to the canvas.
Syntax
new fabric.Textbox(text: String, options: 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 colour, cursor, stroke width and a lot of other properties can be changed related to the textbox object.
Example 1: Basic Textbox Creation
Creating an instance of fabric.Textbox() and adding it to our canvas
Let's see a code example of how we can add a textbox to our canvas. Here we have created an object with a width of 400px and font size as 20px. Also, we have used the font family "Helvetica" which is a sans serif font.
<!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>Creating an instance of fabric.Textbox() and adding it to our canvas</h2>
<p>You can see textbox has been added to our canvas</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("He who is brave is free.", {
top: 70,
left: 80,
width: 400,
fontSize: 20,
padding: 10,
fontFamily: "Helvetica",
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
Example 2: Using the Set Method
Manipulating the Textbox object by using the set method
In this example, we have assigned the properties to the textbox by using the set method which is a setter for values. Any property related to stroke, strokeWidth, angle, scaling, rotation, etc., can be mutated by using this method.
<!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>Manipulating the Textbox object by using the set method</h2>
<p>You can select the textbox to move it around the canvas</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("He who is brave is free.");
// Set the properties
textbox.set("top", 70);
textbox.set("left", 65);
textbox.set("fill", "#ff69b4");
textbox.set("fontWeight", "bold");
textbox.set("backgroundColor", "black");
textbox.set("width", 400);
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
Key Textbox Properties
| Property | Description | Example Value |
|---|---|---|
width |
Sets the width of the textbox | 400 |
fontSize |
Sets the font size of the text | 20 |
fontFamily |
Sets the font family | "Helvetica" |
fill |
Sets the text color | "#ff69b4" |
backgroundColor |
Sets the background color of textbox | "black" |
Conclusion
Creating textboxes in FabricJS is straightforward using the fabric.Textbox class. You can customize appearance through constructor options or the set method for dynamic styling and positioning.
863 Views
