Easy double buffering on HTML5 canvas

There is a lot of cool stuff around HTML5 canvas, requestAnimationFrame and making animations with Javascript.

If you can, you should also check out CSS animations if you're after animating DOM elements.

For more advanced stuff, you may want to use a canvas, that is usually GPU-accelerated and allows pretty high and stable framerates using window.requestAnimationFrame.

If you need double buffering on the canvas, one of the popular ways is to create a second canvas element and draw to that one and then draw the completed image to the primary canvas using drawImage, resulting in something like this:

var primaryCtx = document.getElementById("canvas").getContext("2d");
var secondaryCanvas = document.createElement("canvas"),
      secondaryCtx = secondaryCanvas.getContext("2d");

(function drawFrame() {
    requestAnimationFrame(drawFrame);
    secondaryCtx.fillStyle = "#f00";
    secondaryCtx.fillRect(10,10,20,20);
    primaryCtx.drawImage(secondaryCanvas);
})();

which never felt quite right.

Enter ctx.save() and ctx.restore()
Today I discovered there's a way that feels cleaner and performs just as good as the method from above:

(function drawFrame() {
    requestAnimationFrame(drawFrame);
    primaryCtx.save(); //Freeze redraw
    primaryCtx.fillStyle = "#f00";
    primaryCtx.fillRect(10,10,20,20);
    primaryCtx.restore(); //And now do the redraw
})();

which, despite the weird names, just freezes the rendering of the context and then resumes rendering after we're finished drawing on it.