FabricJS – How to find the real center coordinates of an Image object?

In this tutorial, we are going to learn how to find the real center coordinates of an Image object using FabricJS. We can create an Image object by creating an instance of fabric.Image. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity etc. In order to find the real center coordinates of an Image 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= 256.5 and y= 91, 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> 
   <img
      src="https://www.tutorialspoint.com/images/logo.png"
      id="img1"
      style="display: none"
   />
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the getCenterPoint method
      console.log(
         "The center point of Image object is: ",
         image.getCenterPoint()
      );
   </script>
</body>
</html>

Using getCenterPoint method along with cropX method

Example

In this example, we have used the getCenterPoint method along with cropX method to prove that the logged value of center points will remain the same.

<!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 along with cropX 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>
   <img
      src="https://www.tutorialspoint.com/images/logo.png"
      id="img1"
      style="display: none"
   />
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         cropX: 70,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the getCenterPoint method
      console.log(
         "The center point of Image object is: ",
         image.getCenterPoint()
      );
   </script>
</body>
</html>

Updated on: 27-Oct-2022

434 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements