How to find text box height in IText using FabricJS?

In this tutorial, we are going to learn about how to find text box height 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 calculate the text box height by using the calcTextHeight method.

Syntax

calcTextHeight()

Example 1

Using the calcTextHeight method

Let’s see a code example to see how the IText object looks like when the calcTextHeight method is used. In this case, the text height will be returned.

<!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 calcTextHeight method</h2>
   <p> You can open console from dev tools and see that the text height value is being displayed in the console </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.", {
         width: 300,
         left: 60,
         top: 70,
         fill: "red",
      });

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

      // Using calcTextHeight method
      console.log("The text height is: ", itext.calcTextHeight());
   </script>
</body>
</html>

Example 2

Using the calcTextHeight method to calculate increased text box height

In this example, we have deliberately increased the text box height by adding additional lines of text. Thus the calcTextHeight method returns the increased text box height, which in this case is approximately 97.632.

<!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 calcTextHeight method to calculate increased text box height
   <p> You can open console from dev tools and see that the text height value being displayed in the console has increased </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: 60,
         top: 70,
         fill: "red",
      });

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

      // Using calcTextHeight method
      console.log("The new text height is: ", itext.calcTextHeight());
   </script>
</body>
</html>

Updated on: 12-Sep-2022

332 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements