This means that, the text below is probably going to be overlooked:
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore Try to find the song lyrics et dolore magna aliqua. I remember when we broke up the first time Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Saying, “This is it, I’ve had enough,” ’cause like
We hadn’t seen each other in a month Duis aute irure dolor in reprehenderit in voluptate When you said you needed space. (What?) velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum”
Whereas, this isn’t:
At this point you’re either laughing or waiting for me to come to the point.
The point of this article is: understanding the importance of text wrapping.
We are in the era where we let pictures do most of the talking. So, naturally, whenever there is a lot of text and an image describing the essence of the text, the text must conform to it and “wrap” itself around the image.
The image is kept as the focal point. However, wrapping text becomes burdensome in canvas unless you want to put \n (newline character) everywhere or want your text to look like this:
Therefore, FabricJS introduced the Textbox class which allows the user to resize the text rectangle and adjusts the height of it by wrapping the lines automatically.
So, if we were to add an instance of fabric.Textbox instead of fabric.Text to the canvas, the output would be:
Let’s see how we can achieve the above output by studying the code below:
var canvas = new fabric.Canvas("canvas", {
backgroundColor: "black",
});
canvas.setBackgroundImage(
"https://images.unsplash.com/photo-1570284613060-766c33850e00?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80",
canvas.renderAll.bind(canvas),
{
scaleX: 0.6,
scaleY: 0.6,
}
);
// Instantiate an instance of fabric.Textbox
var textbox = new fabric.Textbox(
"I shall be telling this with a sigh Somewhere ages and ages hence: Two roads diverged in a wood, and I— I took the one less traveled by, And that has made all the difference.",
{
left: 45,
top: 60,
fontSize: 22,
fontFamily: "Cambria",
fill: "#e7feff",
fontStyle: "italic",
width: 290,
opacity: 1,
textAlign: "center",
}
);
canvas.add(textbox);
canvas.renderAll();Reminder: Don’t forget to add the FabricJS library in your HTML!
In order to create a Textbox object, we need to initiate an instance of fabric.Textbox, provide it a mandatory String of text as the first argument and add it to the canvas.
The second argument is the optional options Object where we can use the width property to set the width of the Textbox. In the example above, you can see that the width is 290 px.
You can click here to see the constructor definition.
You could say that FabricJS gives us the options to create objects for our specific needs.
If we just want to add pretty text to our canvas, we can use the Text class. Whereas if we want to cut, paste, select or edit text, we can use IText.
Textbox which is based on the IText class was created to support the wrapping of lines. This means all you need to do is to provide a width value in the optional options object and the text would be automatically wrapped according to that width.
Useless Outro
We have come to the end of this article and I hope that was interesting!
I changed the approach for writing this article a bit since the articles were getting too serious. And, I don’t necessarily want them to be that!
By the way, have you ever taken the Harry Potter House quiz? I’ve always wanted to be in Slytherin. I know that they have been mostly depicted as the bad guys lol but I can’t help but be drawn to the mystery surrounding this house.
Anyway, I hope that was fun. In the next article, we’ll learn about adding Shadow to canvas objects.
