Deleting Items from Canvas

This fiddles tries to demonstrate how you can delete All objects(grouped/ungrouped) inside a fabric Canvas. Whether the objects are grouped or not.

by Shane Mfeya

HTML

<canvas id="playground" width="800" height="400"></canvas>
<button name="Delete Canvas Items" id="delete">
Delete Canvas Items
</button>

JavaScript

var Canvas = new fabric.Canvas('playground',{
	backgroundColor:'yellow'
});

var text1 = new fabric.Text("GROUP 1",{
	left : 100,
  top:100,
  height: 10,
  width: 15,
  fontSize: 12
});

var rect = new fabric.Rect({
	left:100,
  top:100,
  height: text1.height,
  width: text1.width,
   fill: 'rgba(0,0,0,0)',
});

var group = new fabric.Group([rect,text1]);

Canvas.add(group);

var text2 = new fabric.Text("GROUP 2",{
	left : 190,
  top:190,
  height: 10,
  width: 15,
  fontSize: 12
});

var rect = new fabric.Rect({
	left:190,
  top:190,
  height: text2.height,
  width: text2.width,
  fill: 'rgba(0,0,0,0)',
});

var group = new fabric.Group([rect,text2]);
Canvas.add(group);
var text3 = new fabric.Text("TEXT",{
	left : 70,
  top:70,
  height: 10,
  width: 15,
  fontSize: 12
})

Canvas.add(text3);
Canvas.renderAll();

fabric.util.addListener(document.getElementById('delete'),'click',function(){
    deleteCanvasItems();
});
function deleteCanvasItems(){
		Canvas.ForEachObject(function(o){
     o.remove();
    });
}