How to find the complexity of an Image instance using FabricJS?

FabricJS Javascript HTML5 Canvas

In this tutorial, we are going to learn how to find the complexity of an Image instance 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 complexity of an Image instance, we use the complexity method. This method will return 1 if the current object is directly inherited from a base class and not from a subclass.

Syntax

complexity(): Number

Using the complexity method

Example

Let’s see a code example to see the logged output when we use the complexity method to obtain the complexity of the Image instance. The complexity is 1 unless sub-classed.


<!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 complexity method</h2>
   <p>You can open console from dev tools and see the logged output</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 complexity method
      console.log("The complexity of Image instance is: ", image.complexity());
   </script>
</body>
</html>

Using the complexity method to compare different objects

Example

In this example, we have used the complexity method to compare the complexities of an Image instance and a polygon instance. You can open the console from dev tools to see that the complexities are different.


<!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 complexity method to compare different objects</h2>
   <p>You can open console from dev tools and see the logged output</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: 50,
      });
      
      // Initiate a Polygon object
      var polygon = new fabric.Polyline(
         [
            { x: 50, y: 30 },
            { x: 105, y: 10 },
            { x: 160, y: 30 },
            { x: 100, y: 150 },
         ],
         {
            fill: "red",
            left: 450,
            top: 70,
         }
      );
      
      // Add them both to the canvas
      canvas.add(image);
      canvas.add(polygon);
      
      // Using the complexity method
      console.log("The complexity of Image instance is: ", image.complexity());
      console.log(
         "The complexity of Polygon instance is: ",
         polygon.complexity()
      );
   </script>
</body>
</html>

Rahul Gurung

Updated on: 27-Oct-2022

88 Views

Kickstart Your Career

Get certified by completing the course

Get Started