CODEWITHSUNDEEP
javascriptcanvasfabricjs
MP.
MP.

Reputation: 131

How to deactivate all objects in Fabric.js

How to deactivate all objects in Fabric.js before saving an image?

function rasterize() {
  if (!myscript.Canvas.supports('toDataURL')) {
    alert('This browser doesn\'t provide means to serialize canvas to an image');
  }
  else {
    /*i want to deactivate all object here*/
    window.open(canvas.toDataURL('png'));
  }
}

Upvotes: 13

Views: 14142

Answers (5)

dami7786
dami7786

Reputation: 36

that's work for me:

canvas.discardActiveObject();
canvas.requestRenderAll();

Upvotes: 1

Emeric
Emeric

Reputation: 6915

What worked for me (fabric 2.7):

this.canvas.forEachObject(object => {
    object.selectable = false;
    object.evented = false;
});

Another solution is to apply some CSS to the canvas : pointer-events: none

Upvotes: 5

Jitendra Pawar
Jitendra Pawar

Reputation: 1321

canvas.deactivateAll();
canvas.renderAll();

only this two lines also do the same no need to make canvas.selection as false. It is used to disable group selection.

Upvotes: 1

Martin Thoma
Martin Thoma

Reputation: 136437

When I found this question, I was looking for:

/* Make sure that touch / click events do nothing */
canvas.deactivateAll();
canvas.selection = false;
canvas.forEachObject(function(o) {
    o.selectable = false;
});

Upvotes: 0

Kienz
Kienz

Reputation: 3507

canvas.deactivateAll(); => no events are fired http://fabricjs.com/docs/fabric.Canvas.html#deactivateAll

or

canvas.deactivateAllWithDispatch(); => if activeObject exists the events 'before:selection:cleared' and 'selection:cleared' are fired. http://fabricjs.com/docs/fabric.Canvas.html#deactivateAllWithDispatch

Upvotes: 10

Related Questions