Add Text to the Canvas using FabricJS- Part 2

In my previous article I explained the basics of adding Text to the canvas.

But there is so much more you can achieve by playing around with the optional options object.

Adding subscript to Text

FabricJS allows us to add subscript or superscript by using the setSubscript and setSuperscript methods.

When a letter, number or symbol is printed below the line, we call it a subscript and vice versa for superscript.

In the example below, the setSubscript method has been used in conjunction with the subscript property. The subscript property accepts an object where we can change the “size” and “baseline” of the subscript.

setSubscript(start, end): fabric.Text

// start- selection start
// end- selection end

I have used setSubscript method in the example below and passed it the value (0,6). This means that our subscript will be starting from the 0th index and end at the 6th index.

You can also see that “Babaji” appears to be slightly bigger in size than the rest of the words. This is because, in the subscript property, I have passed “size” a value of 2. Doing this makes our subscript text twice as big.

The baseline value suggests how far below our subscript text should be placed. Since we have passed it a value of 0.89, the text is placed 0.89 pixels below.

Feel free to play around with symbols or numbers.

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

      // Instantiate an instance of fabric.Text
      var text = new fabric.Text("Babaji ka Thullu 🐍", {
        left: 10,
        top: 60,
        fontSize: 23,
        fontFamily: "Courgette",
        fontStyle: "italic",
        stroke: "white",
        strokeWidth: 0.4,
        textAlign: "left",
        fill: "#bfff00",
        subscript: { size: 2, baseline: 0.89 },
      });

      // using setSubscript method
      text.setSubscript(0, 6);

      // Adding it to the canvas
      canvas.add(text);

output

Reminder: I have only added the JS to keep things simple in the above code. So, don’t forget to add the FabricJS library in your HTML.

Using the styles property

Imagine you are secretly an aspiring writer and you want your text to be like this:

Long long ago there was a panda who was…….

In the above text, the first “L” is not only larger in size but also has shifted below the baseline while the other letters of the same word “Long”, retain their natural baseline.

In many cases, adding something like this by using the native canvas API might seem a little daunting. However, by using the styles property in FabricJS, we can style individual characters or letters or numbers where ever in our sentences and however we want.

In the example below, I have used the styles property which accepts an Object value where line number is the top level property followed by character numbers (second-level property).

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

      // Instantiate an instance of fabric.Text
      var text = new fabric.Text(
        "There is only one way to\nhappiness and that is to cease\nworrying about things which\nare beyond the power of our will. Epictetus",
        {
          left: 10,
          top: 60,
          fontSize: 23,
          fontFamily: "Courgette",
          fontStyle: "italic",
          stroke: "black",
          strokeWidth: 0.3,
          textAlign: "left",
          fill: "#b0e0e6",
          styles: {
            0: {
              // first line
              0: {
                // first letter
                fontSize: 35,
                fontWeight: "bold",
                fontStyle: "italic",
              },
            },
          },

          // This will change the size and baseline of our subscript
          subscript: { size: 0.5, baseline: 0.21 },
        }
      );

      // setSubscript method
      text.setSubscript(118, 128);

      // Adding it to the canvas
      canvas.add(text);

Creating an instance of IText on the canvas

As promised, I will be finishing off this article by talking a little bit about IText.

FabricJS version 1.4 introduced the IText class probably because although the Text class has a lot of functionality, it doesn’t really make our text interactive.

IText not only supports a plethora of key combinations but what makes it truly stand out (at least imo), is its ability to let us edit text on the fly.

By default, the editable property of IText has a Boolean value of true. So, by simply double clicking on the text, it becomes editable.

IText class of FabricJS

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

      // Instantiate an instance of fabric.IText
      var itext = new fabric.IText("This is an instance of fabric.IText", {
        left: 10,
        top: 60,
        fontSize: 23,
        fontFamily: "Helvetica",
        fontStyle: "italic",
        stroke: "white",
        fill: "purple",
      });

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

In the above code, I have instantiated an instance of fabric.IText and added it to the canvas.

Yup, that is all it takes to go from just pretty to pretty and interactive in FabricJS.

In the next article, I’ll continue with IText and we shall dive deeper into the IText class.