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 create a canvas with Text using FabricJS?
In this tutorial, we are going to learn about how to create a canvas with a Text object using FabricJS. We can display text on canvas by adding an instance of fabric.Text. Not only does it allow us to move, scale and change the dimensions of the text but it also provides additional functionality like text alignment, text decoration, line height which can be obtained by the properties textAlign, underline and lineHeight respectively. One difference between Text and Textbox is, Textbox is editable interactively while Text isn’t.
Syntax
new fabric.Text( text: String , options: Object)
Parameters
text − This parameter accepts a String which is the text string that we want to display as our text.
options (optional) − This parameter is an Object which provides additional customizations to our text object. Using this parameter colour, cursor, stroke width and a lot of other properties can be changed related to the text object.
Example 1
Creating an instance of fabric.Text() and adding it to our canvas
Let’s see a code example of how we can add a text object to our canvas. The only required parameter is the actual text string whereas the second argument is the optional options object which allows us to assign different properties to the text object.
<!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.Text() and adding it to our canvas</h2> <p>You can see the text in the canvas now</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 text object var text = new fabric.Text("Add sample text here", { left: 50, top: 70, }); // Add it to the canvas canvas.add(text); </script> </body> </html>
Example 2
Manipulating the Text object by using the set method
In this example, we have assigned the properties to the text object 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 Text object by using the set method</h2> <p>You can see the text in the canvas now with set values</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 text object var text = new fabric.Text("Add sample text here"); // Set the properties text.set("top", 70); text.set("left", 65); text.set("fill", "white"); text.set("fontWeight", "bold"); text.set("backgroundColor", "#bf94e4"); // Add it to the canvas canvas.add(text); </script> </body> </html>
743 Views
