How to change the alignment of text to path in IText using FabricJS?

In this tutorial, we are going to learn about how to change the alignment of text to path 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. Likewise, we can specify the alignment of text to path for our text by using the pathAlign property.

Syntax

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

Parameters

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

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

Options Keys

  • pathAlign − This property accepts a String value which determines the perpendicular position of each character relative to the path.The possible values are “baseline”, “ascender”, “descender” and “center”. The default value is baseline. The possible values are explained below:

    • baseline − It places the baseline of text on the path.

    • ascender − It places the text inside the path.

    • descender − It places the text outwards from the path.

    • center − Places the text lines such that they lie exactly on the center of the path.

Example 1

Default value of path alighment

Let’s see a code example to see how the text path looks like when we have not used the pathAlign property. Here, the “M” command stands for move and tells the invisible pen to move to point 0,0. The “C” command stands for “cubic bezier” which makes the pen draw a bezier curve. As we have not used the pathAlign property, the default path alignment will be followed which is baseline.

<!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 value of path alignment</h2>
   <p>You can see the default path alignment</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 a path instance
      var path = new fabric.Path("M 0 0 C 100 -100 150 -100 300 0", {
         strokeWidth: 1,
      });

      // Initiate an itext object
      var itext = new fabric.IText("Add sample text here.", {
         width: 300,
         left: 60,
         top: 70,
         fill: "red",
         path: path,
         pathSide: "left",
         pathStartOffset: 0,
      });

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

Example 2

Passing the pathAlign property as key

In this example, we have passed the pathAlign property as key. Since we have passed the value as “ascender”, the alignment of each character will now be changed.

<!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 pathAlign property as key </h2>
   <p>You can see that the path alignment has been changed</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 a path instance
      var path = new fabric.Path("M 0 0 C 100 -100 150 -100 300 0", {
         strokeWidth: 1,
      });

      // Initiate an itext object
      var itext = new fabric.IText("Add sample text here.", {
         width: 300,
         left: 60,
         top: 70,
         fill: "red",
         path: path,
         pathSide: "left",
         pathStartOffset: 0,
         pathAlign: "ascender"
      });

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

Updated on: 12-Sep-2022

297 Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements