trying to debug undo functionality in canvas paint program

Question

here is my page http://www.dev.1over0.com/canvas/canvas_web.html

I'm having issues with the undo functionality – I think I'm getting close but here's the issue

First I'll tell you the basics of the drawing application – I'm layering four different canvases http://www.dev.1over0.com/canvas/js/canvas_web.js if you look at the js file you'll see at the top all my comments on what I'm doing with the canvases

when a user uses a tool to draw – it actually draws it first temporarily on the imageTemp canvas – each tool has it's own object (pencil, rectangle, line) with functions within for mousedown, mousemove and mouseup events

at the end of the mouseup event it calls this function

function img_update() {
contexto.drawImage(canvas, 0, 0);
saveActions();
context.clearRect(0, 0, canvas.width, canvas.height);
}

Here the image that's on the temp canvas ends up being drawn on the imageView canvas so essentially the imageTemp canvas is being erased each time

So for the undo functionality I first declare a an empty array

var undoHistory = [];

I also declare a new image

var undoImg = new Image();

when img_update is invoked – it calls another function saveActions

function saveActions() {
var imgData = canvaso.toDataURL("image/png");
undoHistory.push(imgData);
$('#undo_canvas button').removeAttr('disabled');
}

In this function – I'm essentially saving the newly drawed image canvas into the undoHistory array This seems to be working fine (I believe) So after each time the permanent imageView canvas is updated is saves that state into an array

Now if you notice once you draw an image and it's save to the imageView canvas the undo button becomes enabled

So if you click the undo button it calls this function

function undoDraw() {
if(undoHistory.length > 0){ 
$(undoImg).load(function(){
contexto.drawImage(undoImg, 0,0);
 });
undoImg.src = undoHistory.pop();
if(undoHistory.length == 0) { 
$('#undo_canvas button').attr('disabled','disabled');
}
}
}                              

Here what I'm trying to do is take the previous image state and draw it on the canvas It's working in a way that it affects the z-index of the images but not getting rid of the images And you have to click it twice as well which confuses me

So if you can try drawing out three rectangles on top of each other You can click the undo button and it will effect the z-index – click it three times you'll see what I mean so it's sort of working, maybe ;-{

Answer 1

You have to clear the canvas before you draw the last image, otherwise it will draw an image onto the previous canvas; Also, you pop the last image which is the one you just've pushed in (this is why you have to click twice). So try something like this ( you might have to adapt the code I'm not sure it works out of the box)

function undoDraw(){
   if(undoHistory.length > 0){ 
      $(undoImg).load(function(){
          contexto.clearRect(0,0, canvas.width, canvas.height);     
          contexto.drawImage(undoImg, 0,0);
     });
   undoHistory.pop();
   undoImg.src = undoHistory.pop();
   if(undoHistory.length == 0) { 
   $('#undo_canvas button').attr('disabled','disabled');
        }
     }                
}