使用fabricjs从Canvas中删除所有对象（Grouped / Ungrouped）

Question

I am trying to remove all the objects on my Canvas without selecting them. The objects in the Canvas include Grouped and Ungrouped object. All the Examples I've seen demonstrate how to delete a single ungroup object.

Canvas.ForEachObject(function(o){
     o.remove();
    });

Please see the fiddle for an example of what I'm trying to achieve. https://jsfiddle.net/Shane00711/r8su3ya0/

Answer 1

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.

Answer 2

You just need to call

canvas.clear()

it will remove all object

Answer 3

I figured out what I need to do in order to delete every object(grouped/ungrouped) from my Canvas. First I had to get all the objects in the canvas.

var obj = canvas.getObjects();

once I got all the objects I simply had to loop through them removing each one as I did.

canvas.remove(obj[0]).

The reason I reference the index 0 in my

canvas.remove(obj[0]) 

is because every time and object was removed from the canvas the number of object in the list 'obj' also decreased by 1, moving all the objects up by 1 index. which meant that every object on my canvas would at some point be at index 0 of the 'obj' list.

here's a fiddle of a working example. where I delete all objects on the canvas without selecting a single one. http://jsfiddle.net/Shane00711/r8su3ya0/8/