title: How to align object by bounding box in FabricJS?
body: <p>Wondering if there is a way to align objects in FabricJs by their bounding box?</p>
  
  <p>I'm using obj.getBoundingRect() function to determine objects bounders, then compare them with a bounding box (BB) coordinates of an Active one (that one which I move). If I see that something falls between some gap (let's say 10px) I assign an active object top to be the same top as a comparable element by using a .setTop() property.</p>
  
  <p>The problem is that TOP is not a right attribute to use, since the top of the bounding box may differ between elements. For example, 2 elements with the same top but different angle will have different Bounding Box Top...</p>
  
  <p>Hope you see my point...</p>
  
  <p><a href="https://jsfiddle.net/redlive/hwcu1p4f/" rel="nofollow noreferrer">https://jsfiddle.net/redlive/hwcu1p4f/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = this.__canvas = new fabric.Canvas('canvas');
  //fabric.Object.prototype.transparentCorners = false;
  
  var red = new fabric.Rect({
   id: 1,
    left: 100,
    top: 50,
    width: 100,
    height: 100,
    fill: 'red',
    angle: 0,
    padding: 10
  });
  canvas.add(red);
  
  var green = new fabric.Rect({
   id: 2,
    left: 250,
    top: 180,
    width: 100,
    height: 100,
    fill: 'green',
    angle: 45,
    padding: 10
  });
  canvas.add(green);
  canvas.renderAll();
  
  canvas.on("object:moving", function(e){
   const draggableObj = e.target;
    const draggableObjBound = draggableObj.getBoundingRect();
    
    canvas.forEachObject(function(obj) {
      if (obj.id !== draggableObj.id) {
        var bound = obj.getBoundingRect();
        if (draggableObjBound.top &gt; bound.top - 10 &amp;&amp; draggableObjBound.top &lt; bound.top + 10) {
          draggableObj.setTop(obj.getTop());
        }
      }
    });
  });
  
  canvas.forEachObject(function(obj) {
    var setCoords = obj.setCoords.bind(obj);
    obj.on({
      moving: setCoords,
      scaling: setCoords,
      rotating: setCoords
    });
  });
  
  canvas.on('after:render', function() {
    canvas.contextContainer.strokeStyle = '#555';
    canvas.forEachObject(function(obj) {
      var bound = obj.getBoundingRect();
      canvas.contextContainer.strokeRect(
        bound.left,
        bound.top,
        bound.width,
        bound.height
      );
    })
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.0-rc.3/fabric.js"&gt;&lt;/script&gt;
  &lt;canvas id="canvas" width="800" height="500" style="border:1px solid #ccc"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>