How to get the scaled width of Text using FabricJS

FabricJS Javascript HTML5 Canvas

In this tutorial, we are going to learn how to get the scaled width of Text using FabricJS. We can display text on canvas by adding an instance of fabric.Text. Not only does it allow us to move, scale and change the dimensions of the text but it also provides additional functionality like text alignment, text decoration, line height which can be obtained by the properties textAlign, underline and lineHeight respectively. We can also find the object’s scaled width by using the getScaledWidth method.

Syntax

getScaledWidth()

Example 1

Using the getScaledWidth method

Let’s see a code example to see the logged output when the getScaledWidth method is used. In this case, the width of the object 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 getScaledWidth method</h2>
   <p>You can open console from dev tools and see that the width 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 a text object
      var text = new fabric.Text("Add sample
text here", {
         width: 300,
         fill: "green",
         fontWeight: "bold",
      });

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

      // Using getScaledWidth method
      console.log("The scaled width is", text.getScaledWidth());
   </script>
</body>
</html>

Example 2

Using the getScaledWidth method and passing the scaleX property

Let’s see a code example to see the logged output when the getScaledWidth method is used in conjunction with the scaleY property. In this case, final scaled width will be displayed in the console.


<!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 getScaledWidth method and passing the scaleX property</h2>
   <p>You can open console from dev tools and see that the width value is 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 a text object
      var text = new fabric.Text("Add sample
text here", {
         width: 300,
         fill: "green",
         fontWeight: "bold",
         scaleX: 2,
      });
      
      // Add it to the canvas
      canvas.add(text);

      // Using getScaledWidth method
      console.log("The scaled width is", text.getScaledWidth());
   </script>
</body>
</html>

Rahul Gurung

Updated on: 14-Sep-2022

636 Views

Kickstart Your Career

Get certified by completing the course

Get Started