Cloning objects in Fabric.js

fabricjs, html5-canvas

Solution

here is the solution

 var object = fabric.util.object.clone(canvas.getActiveObject());
    object.set("top", object.top+5);
    object.set("left", object.left+5);
     canvas.add(object);

Problem

I am cloning a selected object on a canvas in Fabric.js using a simple function. ``` function duplicateObj() { var obj = canvas.getActiveObject(); var clone = fabric.util.object.clone(obj); clone.set({left: 100,top: 100}); canvas.add(clone); } ``` That works absolutely fine. Now if I work with the object and the clone is not required anymore and I select and delete it, both objects, the clone and the original object are deleted. The delete function is: ``` function deleteObj() { var obj = canvas.getActiveObject(); canvas.fxRemove(obj); } ``` The objects are the same. Is there are way to clone objects and make the clone independent of the of the original? I tried this: ``` function duplicateObj() { var obj = canvas.getActiveObject(); var clone = fabric.util.object.clone(obj); clone.initialize(); $.extend(clone, obj); fabric.util.object.extend(clone, obj); clone.set({left: 100,top: 100}); canvas.add(clone); } ``` It works, however the objects are the same again and if I only use initialize I am ending up with an object that has now properties set.

Original source