How to find the real center coordinates of a Line object using FabricJS?

FabricJS Javascript HTML5 Canvas

In this tutorial, we are going to learn about how to find the center 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 onedimensional 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 find the real center coordinates of a Line object, we use the getCenterPoint method.

Syntax

 getCenterPoint(): fabric.Point

Using getCenterPoint method

Example

Let’s see a code example to see the logged output when the getCenterPoint method is used. The getCenterPoint method returns the real center coordinates of an object. In this case the logged output is x= 110.5 and y= 150.5, which are the center points.


<!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 getCenterPoint method</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the center points
   </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([70, 100, 150, 200], {
         stroke: "blue",
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using the getCenterPoint method
      console.log(
         "The center point of Line object is: ",
         line.getCenterPoint()
      );
   </script>
</body>
</html>

Using getCenterPoint method with different starting and ending coordinates of line

Example

In this example, we have used the getCenterPoint method to obtain the center coordinates of the Line instance when the starting and ending coordinates are (100, 250) and (250, 40). The center points are 175.5 and 145.5.


<!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 getCenterPoint method with different starting and ending coordinates of line
   </h2>
   <p>
      You can open console from dev tools and see that the logged output contains the center points
   </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([100, 250, 250, 40], {
         stroke: "blue",
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using the getCenterPoint method
      console.log(
         "The center point of Line object is: ",
         line.getCenterPoint()
      );
   </script>
</body>
</html>

Rahul Gurung

Updated on: 21-Oct-2022

279 Views

Kickstart Your Career

Get certified by completing the course

Get Started