Fabric JS object alignment not working as expected

http://stackoverflow.com/questions/43760135/fabric-js-object-alignment-not-working-as-expected

by janetyc

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.min.js"></script>
Please select 2 Objects:
<br />

<canvas id="canvas" width="500" height="400" style="border:1px solid #000"></canvas>

<br /><br />

<small>Object Align: </small>
<button id="objAlignLeft">Left</button>
<button id="objAlignCenter">Center</button>
<button id="objAlignRight">Right</button>

JavaScript

$(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...