So, this afternoon, I spent about four hours and played around with Raphael, the SVG library for HTML 5, and the native Canvas renderer.  Originally, I was only going to go with Raphael, until someone pointed out to me that Raphael doesn't work on Android phones.    Since my apps have to work on Android phones, I had to find a Canvas alternative.

And I do believe it qualifies as an "alternative."  Although in both Firefox and Opera, the Canvas and SVG apps look the same, in Chrome (I'm running 12.0.733.0) the Canvas version has noticeable flicker, poor management of the DIV/Canvas size relationship (even when using jQuery, and even after onReady!), and doesn't quite look the same.

Raphael arcs are... difficult.  They're elliptical arcs and the SVG language describes a path between two points, with two radii of the ellipse (a horizontal and a vertical), two flags indicating whether or not the arc's sweep is positive or negative and to go the long way or the short way, and rotation transformation of the final arc.  It took me a long time to wrap my head around the meaning of all the different possibilities.  Canvas arcs are purely circular so they're more easy to define, but their endpoints are less distinct so creating a "fill" between two line-arcs required more math.   Either way, the learning curve on drawing roundy things is rather steep.

You can see the results in my Raphael and Canvas Experiment project.  The most interesting experiment is Both Arcs, which shows the two arcs being written side by side, Canvas on the left, SVG/Raphael on the right.  If you're running Chrome, you might see the gradient flicker annoyingly.  Still, this was a lovely opportunity to play with Canvas, Raphael, and animation.  The source code to the final experiment is written in HAML and Coffee, because that's just how I roll.  A Makefile is provided.  There wasn't enough CSS to justify using LessCSS.