The native canvas API allows us to only add fill and stroke while drawing text on the canvas. But that too can only be done at a very low level.
The specialty about adding Text in FabricJS is that it works in an object-oriented way. This means that all we need to do is create instances of classes and that would give us complete control over them. We can scale, skew, rotate or animate Text objects.
In order to add text to the canvas, simply instantiate an instance of fabric.Text.
fabric.Text extends fabric.Object which means it is the root object class from which fabric.Text inherits its properties from.
Instantiating an instance of fabric.Text
Let’s see how we can create an instance of fabric.Text and add it to the canvas. By the way, I have only added the JS in this code snippet here so don’t forget to add the fabricjs library in your HTML!
var canvas = new fabric.Canvas("canvas", {
backgroundColor: "black",
});
// Instantiate an instance of fabric.Text
var text = new fabric.Text("I love Potatoes🥔😸", {
width: 300,
left: 20,
top: 90,
fill: "orange",
/* Just a heads up!
In case you don't know-
You can press (win logo key + period) to open the emoji keyboard*/
});
// Adding it to the canvas
canvas.add(text);
Playing around with options in fabric.Text
When we are working with text, naturally we might want to change the background color, text alignment, font size or weight. I think our example above calls for a glow up. So, let’s give it the glow up that it deserves.
var canvas = new fabric.Canvas("canvas", {
backgroundColor: "black",
});
// Instantiate an instance of fabric.Text
var text = new fabric.Text(
"Potatoes are great \nbut potatoes with cheese\nare EPIC.🧀",
{
left: 80,
top: 90,
fontSize: 22, // Default font size is 40
fontFamily: "Poppins, sans-serif",
stroke: "black",
strokeWidth: 0.3,
textAlign: "right", // Default value is "left"
}
);
// setting a gradient as fill color
text.set(
"fill",
new fabric.Gradient({
type: "linear",
coords: {
x1: 10,
y1: 80,
x2: 170,
y2: 100,
},
colorStops: [
{ offset: 0, color: "#d2691e" },
{ offset: 0.3, color: "#ffc40c" },
{ offset: 0.7, color: "#20b2aa" },
{ offset: 1, color: "#ffa07a" },
],
})
);
// Adding it to the canvas
canvas.add(text);
I’m not sure if that can be called a glow up ಠ_ಠ but in the above example, I have assigned the fontSize property a value of 22. Just as its name suggests, fontSize property makes the size of our text bigger or smaller depending on the value that we pass to it. It accepts a Number value (decimal values are allowed✅).
Also, since we learned about gradients in the previous articles, I thought about adding it too. Go and check it out if you haven’t!
Side-note:
While using Google fonts, remember to add the link in the <head> section of your HTML like so:
Side-Side-note:
The possible values of textAlign property are “left”, “center”, “right”, “justify”, “justify-left”, “justify-center” or “justify-right”. However, its default is set to “left”.
In the next article, we’ll continue with fabric.Text and also learn a bit about fabric.IText.
