Object Identifier for FabricJS

Assign object identifier to some objects in fabric.js and save it as json

by Anand Rathod

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.6/fabric.min.js"></script>
<button id="alertJSON">
  Step 1. Alert JSON
</button>
<button id="removeAll">
  Step 2. Remove All
</button>
<button id="loadJSON">
  Step 3. Load JSON
</button>
<br>
<canvas id="canvas" width="400" height="400" class="canvas"></canvas>
<button id="javascriptAccess">
  Step 4. Access with JavaScript
</button>

CSS

canvas {
  border: 1px solid red;
}

JavaScript

var canvas = new fabric.Canvas('canvas');
for (var i = 0; i < 5; i++) {
  var rect = new fabric.Rect({
    top: 0 + (i * 39),
    left: 0 + (i * 39),
    width: 50,
    height: 50,
    fill: 'red',
    id: 'RECT' + i
  });
  canvas.add(rect);
}
var json = canvas.toJSON(['id']);
$('#alertJSON').click(function() {
  alert(JSON.stringify(json));
});
$('#removeAll').click(function() {
  canvas.clear();
});
$('#loadJSON').click(function() {
  var rectOne, rectFour, rectEight;
  canvas.loadFromJSON(json, function() {},
    function(o, object) {
      switch (object.id) {
        case 'RECT1':
          rectOne = object;
          break;
        case 'RECT4':
          rectFour = object;
          break;
        case 'RECT8':
          rectEight = object;
          break;
        default:
          break;
      }
    });
  rectFour.fill = 'black';
  canvas.setActiveObject(rectFour);
  canvas.renderAll();
  setTimeout(function() {
    alert(rectOne.id + ' ' + rectEight.id);
  }, 250);
});
$('#javascriptAccess').click(function() {
  alert(json.objects[0].id);
});