Progressive drawing of simple SVGs on the HTML5 Canvas element

The HTML5 (is there supposed to be a space? I’m not sure) Canvas element is pretty cool! A recent school project involved visualizing some different data sets from┬áin an “interesting” manner. Most of what we did just a standard Google Maps API mash-up but I decided to spruce it up a bit with an intro animation using the Canvas element. My group was visualizing TARP data and from this decidedly American theme I added an animation to the background that drew an outline of the 50 states. This really was my first exposure to JavaScript and HTML5 (mainly being a C++ developer), so it was an interesting learning experience.
Start animation

If you had an HTML5 browser (IE 9+, Firefox 2.0+, Safari 3.1+, Chrome 4+) you’d see something cool here!

A lot of the simpler SVGs contain only simple line drawing commands, so writing a parser for them wasn’t hard (although extending it to curves is generally straightforward). The original SVG for the animation is here. The bulk of the data is kept inside path elements like this:

Apart from the style attributes (which I’ve chosen to ignore), the “d” attribute is really where the meat is. The general format is a list of one-character commands, followed possibly by an argument. The ones we’re interested are:

  • M: Move to
  • L: Line to
  • z: Finish path

As you can imagine, these translate wonderfully to the Canvas functions

I combined all of the states into one massive drawing command and parsed them into a 2-dimensional array:

The function takes the original width and height values of the SVG and scales each vertex by this value, essentially giving us “normalized” points that can be drawn to arbitrary scale. In my actual project the drawing is the background of login page, and needs to resize nicely as the window does.

Once we have the points parsed the obvious next step is drawing. Each animation frame, we calculate the percentage of the total animation time (determined by an arbitrary constant) that has elapsed, and then draw that many more points from the parsed data onto an offscreen buffer (saving where we left off or the next iteration), and then copy it over to the visual canvas. The offscreen buffer is especially necessary if we’re going to draw anything over the animation, since that needs to be applied after the drawing of the animation. The final drawing code looks something like this:

The JavaScript is pretty ugly but it gets the job done. The good thing about using Canvas instead of something like Flash is it works on my iPad :D.

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

4 thoughts on “Progressive drawing of simple SVGs on the HTML5 Canvas element”

    1. Lexi Donald – I would love nothing more than to have the 2 of you catpure some precious family memories for us .especially since our 3rd little will be making his/her grand appearance at the end of November. You are both so very talented!!

Leave a Reply

Your email address will not be published.