Image Filters are shared among cloned Object in Fabric.js

Question

I am using the latest version of Fabirc.js .This is how I am cloning Images .

var object = fabric.util.object.clone(_canvasObject.getActiveObject());

object.set("top", object.top+10);
object.set("left", object.left+10);
_canvasObject.add(object);
_canvasObject.renderAll();

But If I apply image filters to the cloned object, it is also shared by the original objects. How can this be solved?

Answer 1

the clone function you are calling is a object cloning utility stop at first level of cloning. It does not iterate over properties that are objects.

To properly clone an images use:

_canvasObject.getActiveObject().clone(function(cloned) {
  cloned.set("top", cloned.top+10);
  cloned.set("left", cloned.left+10);
  _canvasObject.add(cloned);
});