How to get the current character font size in IText using FabricJS?

FabricJS Javascript HTML5 Canvas

In this tutorial, we are going to learn about how to get the current character font size 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 get the current character font size by using the getCurrentCharFontSize method.

Syntax

getCurrentCharFontSize(): Number

Example 1

Using the getCurrentCharFontSize method

Let’s see a code example to see how the IText object looks like when the getCurrentCharFontSize method is used. Since we have not specified a font size, the default fontSize value for itext object will be returned, which is 40.


<!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>Using the getCurrentCharFontSize method</h2>
   <p>You can open console from dev tools and see the logged output</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: 50,
            top: 70,
            fill: "blue",
         }
      );

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

      // Using getCurrentCharFontSize method
      console.log(
         "The current character font size is: ",
         itext.getCurrentCharFontSize()
      );
   </script>
</body>
</html>

Example 2

Using the getCurrentCharFontSize method along with fontSize property

Let’s see a code example to see the logged output when the getCurrentCharFontSize method is used along with the fontSize property. The fontSize property allows us to specify a font size for our itext object. In this case, since we have passed the fontSize property a value of 25, our logged output will be the same.


<!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>Using the getCurrentCharFontSize method along with fontSize property</h2>
   <p>You can open console from dev tools and see the logged output</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: 50,
            top: 70,
            fill: "blue",
            fontSize: "25",
         }
      );

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

      // Using getCurrentCharFontSize method
      console.log(
         "The current character font size is: ",
         itext.getCurrentCharFontSize()
      );
   </script>
</body>
</html>

Rahul Gurung

Updated on: 13-Sep-2022

296 Views

Kickstart Your Career

Get certified by completing the course

Get Started