so im in the process of trying to implement the undo feature to my app and i ran into an issue, the undo feature works and all however it's either that canvas.remove() doesn't work for some reason or the object:removed event not firing. to make sure that the object does exist i console.log it and sure enough it does exist.. but fabric js doesnt delete the object and neither does it fire the object:removed (obviously)

canvas.on('object:added',function(){
   h = [];
});
 function undo(){
    if(canvas._objects.length>0){
        console.log(h);
        h.push(canvas._objects.pop());
        var lastItem = h[h.length - 1];
        //Logs the object - check the screenshot
        console.log(lastItem);
        canvas.remove(lastItem);
        canvas.renderAll();
    }
}
 $("#undo").click(function()
{
    undo();
});
 //Not firing even though i removed the object..
  canvas.on('object:removed',function(object)
{
   console.warn(object);
});

so im in the process of trying to implement the undo feature to my app and i ran into an issue, the undo feature works and all however it's either that canvas.remove() doesn't work for some reason or the object:removed event not firing. to make sure that the object does exist i console.log it and sure enough it does exist.. but fabric js doesnt delete the object and neither does it fire the object:removed (obviously)

canvas.on('object:added',function(){
   h = [];
});
 function undo(){
    if(canvas._objects.length>0){
        console.log(h);
        h.push(canvas._objects.pop());
        var lastItem = h[h.length - 1];
        //Logs the object - check the screenshot
        console.log(lastItem);
        canvas.remove(lastItem);
        canvas.renderAll();
    }
}
 $("#undo").click(function()
{
    undo();
});
 //Not firing even though i removed the object..
  canvas.on('object:removed',function(object)
{
   console.warn(object);
});

• javascript
• canvas
• fabricjs

Share Improve this question Follow asked Feb 16, 2018 at 20:41 flex_flex_ 73333 gold badges1111 silver badges2929 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

If you will remove object using canvas.remove() then only 'object:removed' event will fire.

DEMO

var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Circle({
 left:50,top:50,radius:50,fill:'red'
}))
canvas.add(new fabric.Circle({
 left:150,top:150,radius:50,fill:'green'
}))
canvas.add(new fabric.Circle({
 left:250,top:250,radius:50,fill:'blue'
}))
canvas.add(new fabric.Rect({
 left:250,top:150,width:100,height:100
}));
canvas.requestRenderAll();

function undo(){
 var object = canvas.item(canvas.getObjects().length-1);
 canvas.remove(object);
}

canvas.on('object:removed',function(object){
  console.warn(object);
})

canvas{
 border:2px solid #000;
}

<script src="https://rawgit./kangax/fabric.js/master/dist/fabric.js"></script>
<button onclick='undo()'>undo</button>
<canvas id='canvas' width=500 height=400>

This will work for you:

var objects = canvas.getObjects();
for(var i = 0; i < objects.length; i++){
  //console.log(objects[i]);     
  canvas.remove(objects[i]);
}canvas.renderAll();