delete selected objects in fabricjs

by Anand Rathod

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>

<button id="select">Selection mode</button>
<button id="draw">Drawing mode</button>
<button id="delete">Delete selected object(s)</button>

JavaScript

var canvas = new fabric.Canvas('paper', { isDrawingMode: true });
$("#select").click(function(){
    canvas.isDrawingMode = false;
});
$("#draw").click(function(){
    canvas.isDrawingMode = true;
});
$("#delete").click(function(){
    canvas.isDrawingMode = false;
    deleteObjects();
});

// Adding objects to the canvas...

// adding text
var text = new fabric.Text('Text inside canvas', { 
  left: 40, 
  top: 50 
});
text.hasRotatingPoint = true;
canvas.add(text);

// adding circle
var circle = new fabric.Circle({
    left: 200,
    top: 150,
    radius: 50,
    fill: "#299b71"
});
circle.hasRotatingPoint = true;
canvas.add(circle);

// adding triangle
var triangle = new fabric.Triangle({
    left: 130,
    top: 150,
    strokeWidth: 1,
    width:70,height:90,
    stroke: 'black',
    fill:'#ff8a1b',
    selectable: true,
    originX: 'center'
});
triangle.hasRotatingPoint = true;
canvas.add(triangle);

// select all objects
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);
            });
        }
    }
}