HTML5 drawing with "replay" feature"

Question

I am trying to implement a html5 drawing app. Currently, I can allow for a drawn image to be saved. I want to be able to have a replay feature that redraws the image the same way that it was originally drawn almost as if it were a video. Any ideas?

Answer 1

Canvas doesn't have a DOM tree as joni suggests. Canvas draws pixels, so you cannot retrieve or move single objects after you've drawn them.

You could save a frame using canvas.getImageData() to an array, and then later restore these frames in the same order, using canvas.putImageData(). Although I'm not sure how well that performs with a big canvas size.

Sample:

// Start with an array where you'll save all frames.
var frames = [];

// Save the output of your canvas to the frames array. Do this every X seconds or X amount of drawing.
var frame = myCanvasElement.getImageData(0, 0, myCanvasElement.width, myCanvasElement.height);
frames.push(frame);

// When the user is done drawing, you can do a replay by restoring the frames one by one in a certain interval.
var fps = 15;
var i = 0;
var myInterval = setInterval(function()
{
    myCanvasElement.putImageData(frames[i], 0, 0);

    i++;
    if (i == frames.length)
    {
        // We've played all frames.
        clearInterval(myInterval);
    }
}, 1000 / fps);

Answer 2

I would think that any action that results in drawing to the canvas you simply save in an ordered array.

You can then step through the array and repeat.