Delete multiple Objects at once on a fabric.js canvas in html5

Question

I'm actually working on a html5 canvas project which uses the fabric.js Framework for the canvas interactions. Now I'm struggeling with the deletion of multiple objects. The following code does not seem to track the selected objects, but tracks all objects on the canvas.

var deleteSelectedObject = document.getElementById('delete-item');
deleteSelectedObject.onclick = function(){
    var curSelectedObjects = new Array();
    curSelectedObjects = canvas.getObjects(canvas.getActiveGroup);
    canvas.discardActiveGroup();
    for (var i = 0; i < curSelectedObjects.length; i++){
        canvas.setActiveObject(curSelectedObjects[i]);
        canvas.remove(canvas.getActiveObject());
    }
};

Don't get my failure.

Just a side note: don't use `var curSelectedObjects = new Array();` new Array, just use `[]`. Especially in this case, where you're not dealing with an array, but a node list (!== the same thing) — Elias Van Ootegem, Aug 06 '12 at 14:10
@kangax yes, thatÄs exactly what I'm trying to do. Any suggestions? — John Mayer, Aug 07 '12 at 07:36
`canvas.getActiveGroup().forEachObject(function(o){ canvas.remove(o) }); canvas.discardActiveGroup().renderAll();` — kangax, Aug 07 '12 at 09:41

score 37 · Accepted Answer · edited Oct 06 '16 at 12:07

Due to @Kangax comment which solved most of the problem, I found the following solution to delete the currently selected objects from the canvas.

var deleteSelectedObject = document.getElementById('delete-item');
deleteSelectedObject.onclick = function()
{
if(canvas.getActiveGroup()){
      canvas.getActiveGroup().forEachObject(function(o){ canvas.remove(o) });
      canvas.discardActiveGroup().renderAll();
    } else {
      canvas.remove(canvas.getActiveObject());
    }
};

The function checks whether a group is selected. If a group is selected every object of the group gets removed. If no group is selected the function tries to remove a selected object. If nothing is selected, the canvas is not changed.

For some reason the your solution did not work, but this one works: http://jsfiddle.net/beewayne/z0qn35Lo/ — Hooman Askari, Dec 22 '16 at 15:40

score 5 · Answer 2 · answered Aug 06 '12 at 14:49

Your code seems like it is selecting and then de-selecting the objects.

This may work better:

var deleteSelectedObject = document.getElementById('delete-item');
deleteSelectedObject.onclick = function()
{
    var curSelectedObjects = canvas.getObjects(canvas.getActiveGroup);

    canvas.discardActiveGroup();
    for (var i = 0; i < curSelectedObjects.length; i++)
    {
        canvas.remove(curSelectedObjects[i]);
    }
};

Good information link:

https://github.com/kangax/fabric.js/wiki/Tutorial-2#wiki-modifying-objects

score 3 · Answer 3 · edited Oct 06 '16 at 10:18

3

You can check any object property and can remove

var objects = canvas.getObjects();

for (var i = 0; i < objects.length; ) {
  if (objects[i].name == 'cropArea' || objects[i].name == 'bleedLine') {
    canvas.remove(objects[i]);
    i = 0;
  } else {
    i++;
  }
}

edited Oct 06 '16 at 10:18

Joseph Callaars

1,770
1
19
28

answered Oct 06 '16 at 09:25

Amit Gaur

31
2

score 0 · Answer 4 · answered Jun 06 '15 at 16:35

0

I done this:

  var selectedObj = canvas.getObjects(canvas.getActiveGroup())

return me the array of the selected objects. :) the last function paranthesis is missing in your code snippet

answered Jun 06 '15 at 16:35

Ajit kohir

481
5
14

score 0 · Answer 5 · answered Dec 22 '16 at 15:43

None of the solutions above (or anywhere elese on stackoverflow) worked for me except for this one solution I found on jsfiddle:

function deleteObjects(){
var activeObject = canvas.getActiveObject(),
activeGroup = canvas.getActiveGroup();
if (activeObject) {
    if (confirm('Are you sure?')) {
        canvas.remove(activeObject);
    }
}
else if (activeGroup) {
    if (confirm('Are you sure?')) {
        var objectsInGroup = activeGroup.getObjects();
        canvas.discardActiveGroup();
        objectsInGroup.forEach(function(object) {
        canvas.remove(object);
        });
    }
}
}

http://jsfiddle.net/beewayne/z0qn35Lo/

score 0 · Answer 6 · answered Jan 15 '20 at 16:11

0

Did you know that canvas.remove can take more than one parameter? So the easiest way should be this one:

canvas.remove(...canvas.getObjects());

Other than canvas.clear this will only remove the objects in the canvas and not also the background.

answered Jan 15 '20 at 16:11

TAB

1,944
8
28
45

Delete multiple Objects at once on a fabric.js canvas in html5

6 Answers6

Linked