July 7, 2011

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:

No comments:

Post a Comment