Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to scale a Line object to a given height using FabricJS?

FabricJS Javascript HTML5 Canvas

In this tutorial, we are going to learn how to scale a Line object to a given height using FabricJS. A Line element is one of the basic elements provided in FabricJS. It is used for creating straight lines. Because line elements are geometrically one-dimensional and do not contain an interior, they are never filled. We can create a line object by creating an instance of fabric.Line, specifying the x and y coordinates of the line and adding it to the canvas. In order to scale a Line object to a given height we use the scaleToHeight method.

Syntax

scaleToHeight(value: Number, absolute: Boolean): fabric.Object

Parameters

  • value ? This parameter accepts a Number which determines the new height value of our line object.

  • absolute ? This parameter accepts a Boolean value which determines whether the viewport is to be ignored or not.

Default appearance of the Line object

Let's see a code example to see how our line object looks when the scaleToHeight method is not used. In this case, our line object will not be scaled in horizontal or vertical directions.

<!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 Line object</h2>
   <p>
      You can see that the object has not been scaled in horizontal or vertical direction
   </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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
      });

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

Using scaleToHeight method with a custom value

In this example, we will see how assigning a value to the scaleToHeight method scales our line object to a given height. Since we have passed the value as 100, that will be the new height of our line object.

<!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 scaleToHeight method with a custom value</h2>
   <p>You can see that the new height of our line object is 100</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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
      });

      // Using scaleToHeight method
      line.scaleToHeight(100, false);

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

Understanding the absolute parameter

The second parameter absolute determines whether to ignore the viewport transform. When set to false (default), the scaling considers the current viewport. When set to true, it ignores viewport transformations and scales relative to the object's original size.

<!DOCTYPE html>
<html>
<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Using absolute parameter as true</h2>
   <canvas id="canvas"></canvas>
   <script>
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "green",
         strokeWidth: 15,
      });

      // Using absolute parameter as true
      line.scaleToHeight(120, true);

      canvas.add(line);
   </script>
</body>
</html>

Key Points

  • The scaleToHeight method proportionally scales both width and height to achieve the desired height
  • The original aspect ratio of the line is maintained during scaling
  • The method returns the fabric object, allowing for method chaining
  • Setting absolute to true ignores viewport transformations

Conclusion

The scaleToHeight method provides an easy way to resize Line objects in FabricJS while maintaining their proportions. Use the absolute parameter to control whether viewport transformations should be considered during scaling.

Updated on: 2026-03-15T23:19:00+05:30

226 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements