What's this?

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.

<div class="canvas-bg">
<canvas>
<style>
  .canvas-bg {
    background: -webkit-canvas(animation) no-repeat 50% 50%;
  }
</style>
<script>
  var ctx = document.getCSSCanvasContext('2d', 'animation', 300, 300);
</script>