History of changes of HTML5 canvas

Question

I am developing HTML5 based paint application using canvas, and now I want to do history of all canvas changes. I mean a history of user actions.

How can I do this?

Answer 1

Saving the data urls into an Array: http://jsfiddle.net/eGjak/54/.

var cv  = $('#cv').get(0);
var ctx = cv.getContext('2d');

var history = [];

$("#b1").click(function() {
    history.push(cv.toDataURL());

    ctx.beginPath();

    ctx.arc(Math.random() * 200 + 100,
            Math.random() * 200 + 100,
            Math.random() * 200,
            0,
            2 * Math.PI);

    ctx.stroke();
});

$("#b2").click(function() {
    ctx.beginPath();

    var img = new Image;

    img.onload = function() {
        ctx.clearRect(0, 0, 400, 400);
        ctx.drawImage(img, 0, 0);
    };

    img.src = history.pop();
});

Answer 2

What you may try to do is creating an array of events, and fill it each times your onclick (or the events wich interest you) happen. this way, you have an history of all user inputs.

You may also instead of storing the events only, store with them the tool being used, to simplify the redrawing at a previous state.

Is that what you wanted ?