How to set the text alignment in IText using FabricJS?

In this tutorial, we are going to learn how to set the text alignment of text in IText using FabricJS. The IText class was introduced in FabricJS version 1.4, extends fabric.Text and is used to create IText instances. An IText instance gives us the freedom to select, cut, paste or add new text without additional configurations. There are also various supported key combinations and mouse/touch combinations which make text interactive which are not provided in Text.

Textbox, however, which is based on IText allows us to resize the text rectangle and wraps lines automatically. This is not true for IText as height is not adjusted based on the wrapping of lines. We can manipulate our IText object by using various properties. Similarly, we can also set its text alignment by using the textAlign property.

Syntax

new fabric.IText(text: String , { textAlign : String }: Object)

Parameters

  • text − This parameter accepts a String which is the text string that we want to display.

  • options (optional) − This parameter is an Object which provides additional customizations to our IText object. Using this parameter colour, cursor, border width and a lot of other properties can be changed related to the object of which textAlign is a property.

Options Keys

  • textAlign − This property accepts a String as a value which allows us to control the possible values of text alignment. Its default value is left. The other possible values are “center”, “right”, “justify”, “justify-left”, justify-center” and “justify-right” which are explained below:

    • center − Aligns the text at the center.

    • right − Aligns the text to the right.

    • justify − Stretches the lines such that each line has same distance from the both left and right edges of the IText object.

    • justify-left − Stretches the lines such that each line has same distance from the left-edge of the IText object.

    • justify-center − Centers each line leaving different distance from both right and left edges.

    • justify-right − Stretches the lines such that each line has same distance from the right-edge of the IText object.

Example 1

Default appearance of the IText object

Let’s see a code example to see how our IText object looks like when the textAlign property is not used. In this case, our text will be aligned towards the left.

<!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>Default appearance of the IText object</h2>
   <p>You can see that the text alignment is towards left</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 an itext object
      var itext = new fabric.IText(
         "Add sample text here.
Lorem ipsum dolor sit amet",{
            width: 300,
            left: 210,
            top: 70,
            fill: "#6b55da",
         }
      );

      // Add it to the canvas
      canvas.add(itext);
   </script>
</body>
</html>

Example 2

Passing the textAlign property as key with a value

In this example, we will see how assigning a value to the textAlign property changes the alignment of the text inside the IText object in our canvas. Since we have passed the value as “right”, the text will now be aligned towards right.

<!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>Passing the textAlign property as key with a value</h2>
   <p>You can see that the text alignment is towards right</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 an itext object
      var itext = new fabric.IText(
         "Add sample text here.
Lorem ipsum dolor sit amet",{
            width: 300,
            left: 210,
            top: 70,
            fill: "#6b55da",
            textAlign: "right",
         }
      );
      
      // Add it to the canvas
      canvas.add(itext);
   </script>
</body>
</html>

Updated on: 13-Sep-2022

490 Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements