Issue with saving canvas data to an array

Question

I am creating a web application using HTML5 canvas to draw images ( like paint web ), I try to implement the "undo" (ctrl+Z) and "redo" features and here I am facing a strange problem with an array of canvas elements. Sometimes, when I hit ctrl+Z to undo, a blank image appears, however the data is in the array and I point to the correct element (because when I play with undo/redo I manage to have the corrects images in the right order).

If you can have a look at the following code I would be grateful, I've spent a lot of time already and I'm not able to locate the problem... :-(

function Stack(firstImg , size) {
    var drawStack = new Array();
    var stackIndex = 0;
    var stackTop = 0;
    var stackFloor = 0;
    var stackSize = size; 

    drawStack[0] = firstImg;

    this.add = function() {
        drawStack[++stackIndex%stackSize] = cvs.toDataURL("image/png");
        if (stackIndex >= stackSize) stackFloor = (stackIndex +1) % stackSize ;
        stackTop = stackIndex % stackSize;
    }

    this.undo = function () {
        if (stackIndex%stackSize == stackFloor ) return;
        clearCanvas();
        var tmpImg = new Image();
        tmpImg.src = drawStack[--stackIndex%stackSize];
        cvsCtx.drawImage(tmpImg, 0, 0);

    }

    this.redo = function () {
        if (stackIndex%stackSize == stackTop) return;
        clearCanvas();
        var tmpImg = new Image();
        tmpImg.src = drawStack[++stackIndex%stackSize];
        cvsCtx.drawImage(tmpImg, 0, 0);
    }
}

Any solution or workaround, I will take, thank you very much !!

javascript arrays have push, pop and shift. im not sure there's a reason to be doing all the modular division and indexing... — jbabey
– jbabey, Commented Mar 26, 2012 at 15:49
to anyone who is interested in this post. My code works, I just forgot the famous img.onload function... which results in blanks pictures in my applications — jazzytomato
– jazzytomato, Commented May 15, 2012 at 10:32

jbabey · Accepted Answer · 2012-04-19 13:44:56Z

6

I have implemented undo/redo functionality a few times and, while I cannot post the code for licensing reasons, I can give you some psuedocode that should demonstrate how simple undo/redo actually is:

first, you need two arrays. call these "undo" and "redo".

Every time the state changes, push that state to the undo stack.

When the user presses ctrl-z (undo), pop the last saved state from the undo stack. push this state to the redo queue, and also make it the current state.

When the user presses ctrl-y (redo), pop the last saved state from the redo queue.

If either of the arrays begins to fill up past the # of states you want to save, use shift to discard the oldest state.

For references on push, pop, and shift, see the MDN documentation.

Also, you will probably find yourself wishing arrays had peek, so here it is:

Array.prototype.peek = function () {
    var theArray = this;
    var temp = theArray.pop();

    if (temp !== undefined) {
        theArray.push(temp);
    }

    return temp;
};

edit: there was a bug in my snippet, calling .peek() on an empty array would push undefined.

edited Apr 19, 2012 at 13:44

answered Mar 26, 2012 at 15:56

jbabey

46.8k12 gold badges73 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jazzytomato Over a year ago

Thank you it sounds great i'll do it again from scratch

Collectives™ on Stack Overflow

Issue with saving canvas data to an array

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related