Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create a Canvas with Textbox Using Fabric.js
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
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 210 px and font size as 20 px. 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
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>
713 Views
