layering Object

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<div class="container">
  <div class="row">
    <div class="span2">
      <div id="btnGroup" class="btn-group">
        <button id="btnCreateCircle" class="btn btn-small" data-toggle="tooltip" title="Circle" rel="tooltip"><i class="fa fa-adjust"></i></button>
        <button id="btnCreateText" class="btn btn-small" data-toggle="tooltip" title="Text" rel="tooltip"><i class="fa fa-font"></i></button>
        <button id="btnCreateImage" class="btn btn-small" data-toggle="tooltip" title="Image" rel="tooltip"><i class="fa fa-image"></i></button>
      </div>

      <ul id="containerLayers">
      </ul>
    </div>
    <div class="span10">
      <canvas id="c" width="400" height="400"></canvas>
    </div>
  </div>
</div>

CSS

@import url('https://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css');
@import url('https://getbootstrap.com/2.3.2/assets/css/bootstrap.css');
canvas {
  border-width: 1px;
  border-style: solid;
  border-color: #000;
  margin: 5px;
}

#btnGroup {
  margin: 5px 5px 10px 3px;
}

#containerLayers {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

#containerLayers li {
  margin: 0 3px 3px 3px;
  padding: 0.4em;
  padding-left: 1.5em;
  height: 15px;
  cursor: move;
}

#containerLayers li span {
  position: absolute;
  margin-left: -1.3em;
}

li {
  border: 1px solid black;
}

.actived {
  border: 1px solid red;
}

JavaScript

// Bootstrap tooltip
var objectArray = new Array();

// http://www.paulirish.com/2009/random-hex-color-code-snippets/
function randomColor() {
  return '#' + Math.floor(Math.random() * 16777215).toString(16);
}

// Fabric canvas
var canvas = new fabric.Canvas('c');
var imageSource = "http://fabricjs.com/lib/pug.jpg";

createObj = function(obj) {
  // remove active state of each layer
  $("li").removeClass("actived");
  canvas.deactivateAll();

  canvas.add(obj);
  canvas.setActiveObject(obj);
  canvas.renderAll();

  // layer
  var id = canvas.getObjects().length - 1;
  objectArray[id] = obj;
  obj.id = id;
  $("#containerLayers").prepend('<li id="' + id + '" class="ui-state-default actived"><span class="ui-icon ui-icon-arrow-2-n-s"></span> item ' + id + '</li>');
  $("#" + id).click(function(evt) {
    if ($(this).hasClass("actived")) {
      // remove active state of all layers and objects
      $("li").removeClass("actived");
      canvas.deactivateAll();
      canvas.renderAll();
    } else {
      // remove active state of all layers and objects
      $("li").removeClass("actived");
      canvas.deactivateAll();
      canvas.renderAll();
      // activate layer and object      
      $(this).addClass("actived");
      canvas.setActiveObject(canvas.item(id));
      canvas.renderAll();
    }
  });
}

$("#btnCreateCircle").click(function(evt) {
  var circle = new fabric.Circle({
    left: 100,
    top: 100,
    radius: 25,
    fill: randomColor(),
    hasRotatingPoint: true
  });

  createObj(circle);
});

$("#btnCreateText").click(function(evt) {
  var text = new fabric.Text('Text', {
    left: 100,
    top: 100,
    hasRotatingPoint: true
  });

  createObj(text);
});

$("#btnCreateImage").click(function(evt) {
  fabric.util.loadImage(imageSource, function(img) {
    var image = new fabric.Image(img);
    image.set({
      left: 100,
      top: 100,
      scaleX: 0.25,
      scaleY: 0.25,
      hasRotationPoint: true
    });

    createObj(image);
 ...