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!

score 72 · Answer 1 · edited Aug 26 '20 at 19:40

72

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

edited Aug 26 '20 at 19:40

CrandellWS

2,708
5
49
111

answered Aug 27 '14 at 19:01

Shantanu Wagh

1,011
7
13

3

If you also want to trigger the `selection:cleared` and `before:selection:cleared` events you are able to use `canvas.deactivateAllWithDispatch()` – Kevin Farrugia May 05 '17 at 13:19
2

not working anymore with fabricjs version >2.x https://github.com/fabricjs/fabric.js/issues/4214 – netzding Oct 17 '18 at 14:52
5

For fabric version > 2.x, canvas.discardActiveObject(); is the way to go – Alejandro Lozdziejski Nov 14 '18 at 06:26
how we can get that deselected object after deselect using that object:deseleted event ? – Mayur Kukadiya Nov 09 '19 at 10:28

score 19 · Answer 2 · answered Feb 12 '15 at 12:36

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

Alex Mac · Answer 3 · 2018-06-25T11:50:04.597

14

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

edited Jun 25 '18 at 11:50

answered Jun 14 '17 at 15:04

Alex Mac

2,970
1
22
39

3

→ In one line `canvas.discardActiveObject().renderAll();` – Emeric Sep 08 '19 at 09:00
1

True, But please read my answer again. I have added how to discard GROUP, OBJECT and then render it. The one line you have added here will work only when you want to remove the single object and render it but in case of removing the entire group, you have to change from OBJECT to GROUP. – Alex Mac Sep 11 '19 at 09:13

score 6 · Answer 4 · answered Nov 26 '19 at 19:00

6

on updates there is just

canvas.discardActiveObject()

answered Nov 26 '19 at 19:00

GIORGI N.

71
1
2

1

Though we thank you for your answer, it would be better if it provided additional value on top of the other answers. In this case, your answer does not provide additional value, since another user already posted that solution. If a previous answer was helpful to you, you should [vote it up](https://stackoverflow.com/help/privileges/vote-up) once you have enough [reputation](https://stackoverflow.com/help/whats-reputation) – David Buck Nov 26 '19 at 19:31

score 1 · Answer 5 · answered Dec 09 '13 at 04:06

I have just found a way to do so:

When multiple objects are activated, they actually formed a group. Then actually just need to use a method of fabric.group called "removeWithUpdate" then it will do.

Example:

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

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

5 Answers5

Linked