FabricJs- Cloning objects loses custom properties

Question

I have set custom properties on SVG objects and on paths within the SVG objects.

Each object I add to the canvas also gets assigned an \'id\' property, as well as some o

Answer 1

DEMO

var canvas = new fabric.Canvas('c');
var rect1 = new fabric.Rect({
  id: 1,
  width: 100,
  height: 100,
  fill: 'red',
  componentType: 'a1',
  shape: 'round1'
});
var rect2 = new fabric.Rect({
  id: 2,
  left:10,
  top:20,
  width: 100,
  height: 100,
  fill: 'magenta',
  componentType: 'a2',
  shape: 'round2'
});
var rect3 = new fabric.Rect({
  id: 3,
  left:30,
  top:30,
  width: 100,
  height: 100,
  fill: 'yellow',
  componentType: 'a3',
  shape: 'round3'
});
var group = new fabric.Group([rect1, rect2, rect3]);
canvas.add(group)
canvas.setActiveObject(group);

function cloneObj() {
  group.clone(function(newgroup) {
    canvas.add(newgroup.set({
     left: newgroup.left + 10,
     top: newgroup.top + 10
    }));
    console.log(newgroup);
  }, ['id', 'componentType', 'shape']);
}

canvas {
    border: 1px solid #999;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<button onclick='cloneObj()'>Clone</button>
<canvas id="c" width="700" height="400"></canvas>

clone accepts a callback and array for additional property to include in cloned object.