Drawing to <canvas> and using it as the CSS background of a DOM node. This allows programmatic animations for background images. Most people use hacks using .toDataURL() to do the same, but .toDataURL() adds a ~33% overhead to the resulting image and involves touching the DOM in JS (el.style.background = 'url("data:...")';). Both are inefficient.

Instead of specifying a URL for the background-image, reference the same
identifier/name in -webkit-canvas() as the one used in the call to document.getCSSCanvasContext(). Note: this is a special method that you need to create
the 2d context with.

Once things are hooked up, requestAniamtionFrame() is used to drive the canvas animation.
The rest is taken care of by the browser when the association is made.

Your browser doesn't support document.getCSSCanvasContext

Drawing an animation to <canvas> and using it as the CSS background-image of a DOM node.This allows backgrounds to be "live" and powered programmatically via canvas.