Fabric.js: how to deselect one or multiple objects on canvas?

Question

For example, I have multiple objects on a canvas, A,*B* and C. Three of these objects are selected as activated. By using Fabric.js, is it possible to discard/deactivate only one of the objects?

For example, Three objects as selected, then when a button outside the canvas is clicked, object B is discarded/deactivated.

I looked into the doc files on FabricJS official website, and I only found canvas.deactivateAll(), canvas.discardActiveObject(). These function are only able to deactivate all active objects while not a specific active object.

Could someone please give me a guide on this? Thanks!

Answer 1

I may be late answering this, but in fabricjs (1.4.3) you can use the following to deselect all selected objects on the canvas.

canvas.deactivateAll().renderAll();

I am using this before creating a image of that canvas. Hope it helps someone.

for fabricjs 4.0 you can use:

canvas.discardActiveObject().renderAll();

Answer 2

suppose you have three objects objectA, ObjectB and ObjectC and objects are selected. Now if you want to deselect any object( for example ObjectB). In this case you can try following code.

var activeGroup = canvas.getActiveGroup();
activeGroup.removeWithUpdate(ObjectB);
canvas.renderAll(); 

If you are having only one node active then you can do.

canvas.discardActiveObject();
canvas.renderAll(); 

Answer 3

To discard all active groups you can use below function.Discards currently active group and fire events If the function is called by fabric as a consequence of a mouse event, the event is passed as a parmater and sent to the fire function for the custom events. When used as a method the e param does not have any application.

canvas.discardActiveGroup();

To discard sigle object you can use like this. Discards currently active object and fire events. If the function is called by fabric as a consequence of a mouse event, the event is passed as a parmater and sent to the fire function for the custom events. When used as a method the e param does not have any application.

canvas.discardActiveObject();

And in the last finally renders both the top canvas and the secondary container canvas like this.

canvas.renderAll();