How to get the coordinates of a Line object using FabricJS?

In this tutorial, we are going to show how you can get the coordinates of a Line 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 get the coordinates of a Line object, we use the getCoords method.

Syntax

 getCoords(): Array

Using getCoords method

Example

Let’s see a code example to see the logged output when the getCoords method is used. The getCoords method returns the top-left, top-right, bottom-right and bottom-left coordinates of a Line in an array format.

<!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 getCoords 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 a Line object
      var line = new fabric.Line([50, 100, 310, 100], {
         stroke: "blue",
         strokeWidth: 10,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using getCoords method
      console.log("The coordinates are: ", line.getCoords());
   </script>
</body>
</html>

Using the getCoords method for a slant line

Example

In this example, we have used the getCoords method to obtain the coordinates of the Line instance with different starting and ending coordinates. We can see that the logged output is: (100, 40), (220, 40), (220,120), (100,120) which are the top-left, top-right, bottom-right and bottom-left coordinates of the line.

<!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 getCoords method for a slant line</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 a Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using getCoords method
      console.log("The coordinates are: ", line.getCoords());
   </script>
</body>
</html>

Updated on: 21-Oct-2022

423 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements