Skip to content

Instantly share code, notes, and snippets.

@psbolden
Created February 16, 2017 16:58
Show Gist options
  • Save psbolden/d27c0ac9b6cba6821b35e2ea1eecdee0 to your computer and use it in GitHub Desktop.
Save psbolden/d27c0ac9b6cba6821b35e2ea1eecdee0 to your computer and use it in GitHub Desktop.
fabric.js delete selected object
Source: http://jsfiddle.net/beewayne/z0qn35Lo/
HTMl
____
<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>
JS
___
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);
});
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment