Canvas off-screen rendering

Rendering to an off-screen buffer can be a great way to cache expensive drawing operations or preform post processing effects. html5's canvas element lets us do it easily.

var buffer = document.createElement('canvas');
var buffer_ctx = buffer.getContext('2d');
// ... draw to buffer_ctx ...

Then simply use our new buffer as an image:

main_ctx.drawImage(buffer, 0, 0);

For example, I can use an off-screen buffer to apply an expensive bloom effect: