All examples By author By category About

mbostock

DOM-to-Canvas using D3

Mouseover to draw circles!

This is a quick proof-of-concept example demonstrating how to create a canvas scenegraph in the DOM using custom namespaced elements. The scenegraph in this example consists of a simple container sketch element and a number of child circle elements:

<custom:sketch width="960" height="500">
  <custom:circle x="300" y="400" r="128" strokeStyle="red"/>
  <custom:circle x="302" y="404" r="129" strokeStyle="red"/>
  …
</custom:sketch>

The browser ignores these elements because they exist in our "custom" namespace. To render them, we use a timer that iterates over the child elements and draws them to a canvas element.

Why do this? Well, if you wanted your own custom representation tailored to a specific application or domain, you can! This example demonstrates how to use the DOM to implement your own element hierarchy and render it to canvas. If you're designing a general-purpose graphical representation, though, I recommend using SVG instead. For comparison, see the original OMG Particles! example.

Implementation note: I'd prefer to use DOM Mutation Events to listen for changes to our custom elements, but browsers seem a bit sluggish in reporting them, particularly when elements are removed. If you have a slow-moving scene, you could probably get away with using mutation events rather than a timer that runs continuously. Alternatively, you could improve this example by stopping the timer after extended periods of activity.