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.