Removing multiple objects on Fabric.js canvas

Question

Struggling to remove multiple objects from the fabric canvas. Everything seems to be in working order but when the code runs it does not remove the multiple selected objects from the canvas.

    service.deleteSelectedObject = function () {
        var selectedObject = service.canvas.getActiveObject();
        var selectedMultipleObjects = service.canvas.getActiveGroup();
        var data = {};

        // get object id
        // get selected objects from canvas

        if (selectedObject) {
            data = {
                type: 'whiteboard::delete',
                id: selectedObject.id
            };

            delete service.objectMap[selectedObject.id];
            service.canvas.remove(selectedObject);
        } else {
            data = {
                type: 'whiteboard::delete',
                object: selectedMultipleObjects
            };
            console.log(selectedMultipleObjects);
            selectedMultipleObjects._objects.forEach(function (object, key) {
                console.log(object);
                service.canvas.remove(object);
            });
        }

        signalService.sendMessage(service.recipient, data);
    };

I should point out that all of these console logs do pass what they should. As well as the problem is occuring in the else statement the first part of this code works how it should

please let me know if you need any further information.

Answer 1

Object of active group are indeed on the canvas but removing them from canvas will not remove them from the rendering pipeline if they are in active group.

When fabricjs draws everything, it checks for object on canvas and presence of activeGroup. If activeGroup is present, its objects get rendered later, regardless they are on canvas or not.

So you are effectively removing the objects from the canvas, but untill you clear the selection of the active group, the objects are still there. Correct procedure is removing the object from the canvas and from the activeGroup.

check the snippet, select all objects with mouse and the press remove all button.

var canvas = new fabric.Canvas('canvas');
var r1 = new fabric.Rect({width:50,height:50});
var r2 = new fabric.Rect({width:50,height:50,top:110, left:110});
var r3 = new fabric.Rect({width:50,height:50,top:60, left:60});
canvas.add(r1,r2,r3);

function removeAll() {
var o = canvas.getActiveGroup();
o._objects.forEach(function (object, key) {
canvas.remove(object);
o.removeWithUpdate(object);
});
canvas.discardActiveGroup();
canvas.renderAll();
}

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.13/fabric.min.js" ></script>
<input type="button" onClick="removeAll()" value="remove"/>
        <canvas id="canvas" width=400 height=400 style="height:500px;width:500px;"></canvas>

Answer 2

After version 2 of fabric.js, there is no getActiveGroup. To delete multiple objects, you need to use forEachObject. This example builds on the previous one and can delete single objects or grouped objects.

var canvas = new fabric.Canvas('canvas');
var r1 = new fabric.Rect({width:50,height:50});
var r2 = new fabric.Rect({width:50,height:50,top:110, left:110});
var r3 = new fabric.Rect({width:50,height:50,top:60, left:60});
canvas.add(r1,r2,r3);

function deleteObj(){
var doomedObj = canvas.getActiveObject();
  if (doomedObj.type === 'activeSelection') {
			// active selection needs a reference to the canvas.
			doomedObj.canvas = canvas;
			doomedObj.forEachObject(function(obj) {
      canvas.remove(obj);
			});
 }//endif multiple objects
  else{
  //If single object, then delete it
  var activeObject = canvas.getActiveObject();
    //How to delete multiple objects?
		//if(activeObject !== null && activeObject.type === 'rectangle') {
    if(activeObject !== null ) {
			canvas.remove(activeObject);
		}
  }//end else there's a single object
}//end deleteObj

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js" ></script>
<input type="button" onClick="deleteObj()" value="remove"/>
        <canvas id="canvas" width=400 height=400 style="height:500px;width:500px;"></canvas>