Sebastian Sebastian - 1 year ago 124
Javascript Question

Detect object completely inside another object

Good day everyone,

I was wondering if there was a way to detect if a fabric object is COMPLETELY inside another object?

I was looking at

in the documentation but unfortunately, as soon as the object is completely inside object2, the function doesn't give back true anymore but false.

Has someone else had this problem? I am do not know at all how to do this.
I have searched for the function in fabric.js. Can someone help?

intersectsWithObject: function(other) {
// extracts coords
function getCoords(oCoords) {
return {
tl: new fabric.Point(,,
tr: new fabric.Point(,,
bl: new fabric.Point(,,
br: new fabric.Point(,
var thisCoords = getCoords(this.oCoords),
otherCoords = getCoords(other.oCoords),
intersection = fabric.Intersection.intersectPolygonPolygon(

return intersection.status === 'Intersection';

Thank you already for your help

Answer Source

If you want to know if an abject is completely inside another object you should use isContainedWithinObject:

isContainedWithinObject(other) → {Boolean}

§ Checks if object is fully contained within area of another object


Name : other
Type: Object

Description: Object to test

Source: fabric.js, line 12300

Returns: true if object is fully contained within area of another object

Type: Boolean

This is the source:

isContainedWithinObject: function(other) {
      var boundingRect = other.getBoundingRect(),
          point1 = new fabric.Point(boundingRect.left,,
          point2 = new fabric.Point(boundingRect.left + boundingRect.width, + boundingRect.height);

      return this.isContainedWithinRect(point1, point2);

It works using the bounding box of the object you would test.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download