Cloning objects in Fabric.js

html5-canvas fabricjs
Benick picture Benick · Feb 10, 2014 · Viewed 18.9k times · Source

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.

Answer

swapnil gandhi picture swapnil gandhi · Nov 3, 2014

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);

Related questions

Need to change the canvas background color while using fabric js

I've a canvas element and I create fabric object out of that. Now, I want to change the background color dynamically. The following doesn't work for me. var x; x = new fabric.Canvas("mycanvas", { backgroundColor : "#fff", selection: true }); x.backgroundColor = "#…

Read More
Reset canvas and reload with JSON in Fabric.js

I'm building something like the kitchensink example except I need to be able to have multiple views. http://fabricjs.com/kitchensink Business Card: front and back As you edit I save the JSON periodically. When you want to edit the …

Read More
Fabric.js - Free draw a rectangle

I have the following which doesn't work correctly: var canvas = new fabric.Canvas('canvas'); canvas.observe('mouse:down', function(e) { mousedown(e); }); canvas.observe('mouse:move', function(e) { mousemove(e); }); canvas.observe('mouse:up', function(e) { mouseup(e); }); var started = …

Read More