title: Fabric JS object alignment not working as expected
body: <p>I tried to align an object within a group. When I align the first object to the left, center or right it was successful, then I tried for the second object, the first object moved by itself!</p>
  
  <p>Please see the image below (GIF):
  <a href="https://i.stack.imgur.com/p2Jjl.gif" rel="nofollow noreferrer">Fabric JS Object Alignment</a></p>
  
  <p>I used HTML5 Canvas, fabric JS &amp; jQuery for the development.</p>
  
  <p>Here is the fiddle: <a href="https://jsfiddle.net/mt0ccqq2/" rel="nofollow noreferrer">https://jsfiddle.net/mt0ccqq2/</a></p>
  
  <p>Here is the Code:</p>
  
  <pre><code>$(document).ready(function() {
  
    var canvas    = new fabric.Canvas("canvas", { preserveObjectStacking: true });
  
    // create rectangle
    var rect = new fabric.Rect({
      left: 50,
      top: 50,
      width: 300,
      height: 100,
      fill: '#ff0000'
    });
  
    // create circle
    var text = new fabric.Text("Align Me next", {
      left: 190,
      top: 320,
      fontSize: 20
    });
  
    // create text
    var text2 = new fabric.Text("Align me first", {
      left: 100,
      top: 200,
      fontSize: 20
    });
  
    canvas.add(rect, text, text2);
    canvas.renderAll();
  
  // GROUP ON SELECTION
  canvas.on("selection:created", function(e) {
      var activeObj = canvas.getActiveGroup();
    if(activeObj.type === "group") {
      console.log("Group created");
  
  var groupWidth = e.target.getWidth();
  var groupHeight = e.target.getHeight();
  
  
  e.target.forEachObject(function(obj) {
      var itemWidth = obj.getBoundingRect().width;
    var itemHeight = obj.getBoundingRect().height;
  
    // ================================
          // OBJECT ALIGNMENT: " H-LEFT "
          // ================================
    $('#objAlignLeft').click(function() {
        obj.set({
          left: -(groupWidth / 2),
          originX: 'left'
        });
      obj.setCoords();
      canvas.renderAll();
    });
    // ================================
          // OBJECT ALIGNMENT: " H-CENTER "
          // ================================
    $('#objAlignCenter').click(function() {
        obj.set({
          left: (0 - itemWidth/2),
          originX: 'left'
        });
      obj.setCoords();
      canvas.renderAll();
    });
    // ================================
          // OBJECT ALIGNMENT: " H-RIGHT "
          // ================================
    $('#objAlignRight').click(function() {
        obj.set({
          left: (groupWidth/2 - itemWidth/2),
          originX: 'center'
        });
      obj.setCoords();
      canvas.renderAll();
    });
  
  });
  
   }
  }); // END OF " SELECTION:CREATED "
  
  });
  </code></pre>
  
  <p>Any help would be appreciated. Thanks in advance.</p>