Cloning objects in Fabric.js

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.

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

Copy and Paste, Copy Selected Objects. Paste Selected Objects. function Copy() { // clone what are you copying since you // may want copy and paste on different moment. clipboard = []; var o = canvas.getActiveObject(); clipboard[0] = fabric.util.object.clone(o); clipboard[0].id = clipboard[0].id + " copy"; The object stored in clipboard[0] is added to the canvas in the paste function. I also have a version to copy groups which works in pretty much the same way.

for fabricjs 2.0

    $(".copy").on("click", function () {
                    var activeObject = canvas.getActiveObject();
                    activeObject.clone(function (cloned) {
                        canvas.discardActiveObject();
                        cloned.set({
                            top: cloned.top + 20,
                            evented: true
                        });
                        if (cloned.type === 'activeSelection') {
                            // active selection needs a reference to the canvas.
                            cloned.canvas = canvas;
                            cloned.forEachObject(function (obj) {
                                canvas.add(obj);
                            });
                            cloned.setCoords();
                        } else {
                            canvas.add(cloned);
                        }
                        canvas.setActiveObject(cloned);
                        canvas.requestRenderAll();
                    });
    });

How to clone fabric.Image objects?, So what is the proper way to clone an Image object so that a copy of it can be added to the canvas? Then after that what would be the proper way to copy a� function Copy {// clone what are you copying since you // may want copy and paste on different moment. // and you do not want the changes happened // later to reflect on the copy. canvas . getActiveObject ( ) . clone ( function ( cloned ) { _clipboard = cloned ; } ) ; } function Paste ( ) { // clone again, so you can do multiple copies.

I was having a similar issue where actions on the clone would affect the original object. I opted to just serialize the object and deserialize it into a new object:

var copyData = canvas.getActiveObject().toObject();
fabric.util.enlivenObjects([copyData], function(objects) {
  objects.forEach(function(o) {
    o.set('top', o.top + 15);
    o.set('left', o.left + 15);
    canvas.add(o);
  });
  canvas.renderAll();
});

Object Clone, First of all fabricjs is very nice library thanks a lot for your efforts. I am stuck in a problem, Can i delink the cloned object so that if i change� When cloning a SVG loaded object changes applied to the parent object will be applied to the cloned object as well. E.x.: If fill-color of a path is applied to the parent object it gets applied to cloned object as well. So the: parent object means the object that clone got created from. Example. Load the svg file:

This worked very well for me, and the cloned object is totally unlinked from the original:

var object = canvas.getActiveObject();

object.clone(function(clone) {
    canvas.add(clone.set({
        left: object.left + 10, 
        top: object.top + 10
    }));
});

And you can do it to clone all selected objects:

var activeObjects = canvas.getActiveObjects();

if (activeObjects) {
    activeObjects.forEach(function(object) {

        object.clone(function(clone) {
            canvas.add(clone.set({
                left: object.left + 10, 
                top: object.top + 10
            }));
        })

    });
}

I hope it can help you!

Deep cloning of objects. � Issue #669 � fabricjs/fabric.js � GitHub, When cloning an image the filters object is shared between clones. It would be nice if we could add the ability to do a deep clone like is� Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

You can use

var obj = canvas.getActiveObject();
obj.clone(function(c) {
   canvas.add(c.set({ left: 100, top: 100, angle: -15 }));
});

Here you can see it working: http://fabricjs.com/opacity_mouse_move/

Copy and Paste objects in Fabric.js - JSFiddle, adding text on canvas. 23. var text = new fabric.Text('1. Select Object(s) \n2. Press Ctr+c to copy \n3. Ctr+v to paste\n4. Or use buttons below', {. 24. left: 100,. 25. Fabric.js also supports grouping, but I didn’t want to mess with it, as I needed custom SVG transformation and God knows how grouped objects are mapped to SVG. Conclusion Fabric.js is one of the best, if not the best, drawing lib on the market atm.

fabric.js clone objects - JSFiddle, 17. canvas.renderAll();. 18. // Create keyboard listener for copy and past feature. 19. createKeyboardListeners();. 20. . 21. function createKeyboardListeners() {. Say I have multiple objects selected on a fabric.js canvas and can get this group of objects using getActiveGroup. Can anyone provide an example of how to copy and paste the group into a new group, where: (a) each object in the copied group retains its relative position to the other copied objects

Drawing with FabricJS and TypeScript Part 8: Cut/Copy/Paste and , Let's add cut/copy/paste functionality to our FabricJS drawing canvas, class Copier { //During cut or paste, memorizedObject is the object that� a fabricObject that, without stroke define a clipping area with their shape. filled in black the clipPath object gets used when the object has rendered, and the context is placed in the center of the object cacheCanvas.

Cloning objects in Fabric.js, I am cloning a selected object on a canvas in Fabric.js using a simple function. function duplicateObj() { var obj = canvas.getActiveObject(); var clone� I am creating a canvas using fabric JS with a dynamic size in admin panel and adding objects into it, after modifying the canvas i am storing the JSON data into the database (using: canvas.toJSON()…

Comments
  • You should be using clone method on an object itself. Each object has it and it takes care of everything
  • Thanks. I cloned a group. That was the problem. Cloning a single object works fine.
  • Hi @Benick! Did you find the solution for cloning a group?
  • works good but newley created element is also selected. is it possible to make it not selected?
  • This was the only solution that decoupled the original and the copy from each other when copying from canvas to another canvas.
  • This doesn't seem to work, maybe an update to fabric.