Fabric.js – How to check if an Image object is fully contained within the area of another object?

FabricJS Javascript HTML5 Canvas

In this tutorial, we are going to learn how to check if an Image object is fully contained within the area of another 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 check if an Image object is fully contained within the area of another object, we use the isContainedWithinObject method.

Syntax

isContainedWithinObject(other: Object, absolute: Boolean, calculate: Boolean ): Boolean

Parameters

other − This parameter accepts an Object which specifies the object we want to test.
absolute(optional) − This parameter accepts a String value which specifies whether to use coordinates without viewportTransform or not. This parameter is optional.
calculate(optional) − This parameter accepts a Boolean value which specifies whether to use coordinates of current position. This parameter is optional.

Using isContainedWithinObject method

Example

Let’s see a code example to see the logged output when the isContainedWithinObject method is used. The isContainedWithinObject method returns true or false on checking if an Image object is fully contained within the area of another 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>Using isContainedWithinObject method</h2>
   <p>
      You can open console from dev tools and see that the logged output contains a true value
   </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,
      });
      
      // Initiate a rectangle object
      var rectangle = new fabric.Rect({
         width: 390,
         height: 130,
         top: 40,
         left: 80,
         fill: "transparent",
         stroke: "red",
         strokeWidth: 6,
      });
      
      // Add them to the canvas
      canvas.add(rectangle);
      canvas.add(image);
      
      // Using isContainedWithinObject method
      console.log(
         "Is the Image object contained within the area of the rectangle object ? : ",
         image.isContainedWithinObject(rectangle)
      );
   </script>
</body>
</html>

Using isContainedWithinObject method with multiple objects

Example

In this example, we have used the isContainedWithinObject method along with two rectangle objects rect1 and rect2 respectively. Since the Image object is not contained within the area of rect2, a false value is returned in the console.


<!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 isContainedWithinObject method with multiple objects</h2>
   <p>
      You can open console from dev tools and see that the logged output contains a false value
   </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,
      });
      
      // Initiate a rectangle object
      var rect1 = new fabric.Rect({
         width: 390,
         height: 130,
         top: 40,
         left: 80,
         fill: "transparent",
         stroke: "red",
         strokeWidth: 6,
      });
     
      // Initiate another rectangle object
      var rect2 = new fabric.Rect({
         width: 120,
         height: 40,
         top: 170,
         left: 320,
         fill: "blue",
      });
      
      // Add them to the canvas
      canvas.add(rect1);
      canvas.add(rect2);
      canvas.add(image);
      
      // Using isContainedWithinObject method
      console.log(
         "Is the Image object contained within the area of the rectangle (rect2) object?: ",
         image.isContainedWithinObject(rect2)
      );
   </script>
</body>
</html>

Conclusion

In this tutorial, we used two examples to demonstrate how you can check if an Image object is fully contained within the area of another object in FabricJS.

Rahul Gurung

Updated on: 26-Oct-2022

455 Views

Kickstart Your Career

Get certified by completing the course

Get Started