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 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>
Key Properties
Common properties you can use with fabric.Text include:
- fill - Sets the text color
- fontFamily - Changes the font family
- fontSize - Sets the font size
- fontWeight - Controls font weight (normal, bold)
- backgroundColor - Adds background color to text
- left, top - Position the text on canvas
- textAlign - Text alignment (left, center, right)
Conclusion
FabricJS makes it easy to add and manipulate text on HTML5 canvas. The fabric.Text object provides extensive customization options through both constructor parameters and the set method for dynamic text styling.
1K+ Views
