Add Text to the Canvas using FabricJS- Part 3

Let’s dive a little deeper into the IText class.

In the previous article we saw how we can add text to the canvas using the Text class.

The Text class allows us to add subscript or superscript, style individual text or just generally change the appearance of our text which could include stuff like, underline, overline, changing the fill or stoke color.

The IText class allows us to cut, paste, select (and do a whole lot of crazy stuff) our text in addition to all the things that I just mentioned above.

The IText class extends fabric.Text and was introduced in version 1.4. Think of IText as the child of the Text class. Whatever properties the Text class has, the IText inherits them but also it has its own unique properties that makes it stand out on its own.

Let me give you another example.

In demon slayer, Tanjiro inherits the sun breathing technique from his father. However, he can also perform the water breathing style, has immense stamina and endurance (something that his father didn’t have).

Side note: If you haven’t watched demon slayer, go watch it R-I-G-H-T-N-O-W!

Changing the cursor properties using IText

Apart from allowing us to edit text on the fly, IText also allows us to change cursor properties. This cannot be achieved using the Text class.

Let’s see how we can implement this in code:

      var canvas = new fabric.Canvas("canvas", {
        backgroundColor: "black",
      });

      // Instantiate an instance of fabric.IText
      var itext = new fabric.IText("Changing the\ncursor properties", {
        left: 10,
        top: 60,
        fontSize: 35,
        fontFamily: "Curlz MT",
        stroke: "black",
        strokeWidth: 0.4,
        fill: "#ff77ff",
        cursorDuration: 100, // cursor fadein will happen every 100ms
        cursorColor: "yellow",
        selectionColor: "rgba(255,255,224, 0.3)", // light yellow color with 0.3 opacity
        cursorWidth: 60, // Width of the cursor is 60 px
      });

      // Adding it to the canvas
      canvas.add(itext);
      canvas.renderAll();

Reminder: Don’t forget to add the FabricJS library in your HTML!

In the above code, if we just get rid of all the cursor properties, our output would look like this:

This is the output that we get when the properties are using their default values

The property names are pretty self-explainatory but let me list them down for you:

1. cursorDuration: Allows us to change the duration of cursor fadein. Its default value is 600ms.
2. cursorColor: Accepts a String value which is the color that we want for our cursor.
3. selectionColor: Determines the color of the text when you drag and select it. The default value is rgba(17, 119, 255, 0.3) which is a cyan-blue shade with 0.3 opacity.
4. cursorWidth: Determines the width of the cursor. Its default value is 2px.

If everything goes well in the above code, you should see the following output in your browser:

You can see that the cursor fade-in occurs faster. Also, the width of our cursor is considerably more than the default.

In the next article, we’ll learn about Textbox and how to implement it in FabricJS.