title: How to detect collisions between DOM-draggables and FabricJS shapes
body: <p>I would like to find object that is already present in the canvas as soon as I drag external image over canvas and it intersects with that canvas object. This is the code I am using for drag and drop:</p>
  
  <pre><code>if (Modernizr.draganddrop) {
      // Browser supports HTML5 DnD.
      // Bind the event listeners for the image elements
      var images = document.querySelectorAll('#images img');
      [].forEach.call(images, function (img) {
          img.addEventListener('dragstart', handleDragStart, false);
          img.addEventListener('dragend', handleDragEnd, false);
      });
      // Bind the event listeners for the canvas
      var canvasContainer = document.getElementById('canvas-container');
      canvasContainer.addEventListener('dragenter', handleDragEnter, false);
      canvasContainer.addEventListener('dragover', handleDragOver, false);
      canvasContainer.addEventListener('dragleave', handleDragLeave, false);
      canvasContainer.addEventListener('drop', handleDrop, false);
  } else {
      // Replace with a fallback to a library solution.
      alert("This browser doesn't support the HTML5 Drag and Drop API.");
  }
  </code></pre>
  
  <p>above mentioned callback functions are defined accordingly.</p>
  
  <p>What I already know is that we can find out the intersection between two objects when they are present within the canvas. Link: <a href="http://fabricjs.com/intersection/" rel="nofollow">http://fabricjs.com/intersection/</a></p>
  
  <p>But my problem is I need to catch the object while I am dragging image from outside the canvas onto the canvas area and it intersects with the canvas object.</p>
  
  <p>Any help would be much appreciated. Thanks.</p>