Fabric JS object alignment not working as expected

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

by franknstayn

HTML

<script src="https://code.jquery.com/jquery-1.12.4.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("32", {
	left: 0,
  top: 0,
  /* fontFamily: 'impact', */
  fontSize: 100
});

// create text
var text2 = new fabric.Text("1", {
	left: 0,
  top: 0,
  /* fontFamily: 'impact', */
  fontSize: 1002 
});

canvas.add(rect, text, text2);
canvas.renderAll();

// GROUP ON SELECTION
canvas.on("selection:created", function(e) {
	var activeObj = canvas.getActiveGroup();
  console.log(activeObj);
  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();
      });
      
    });
        
...