Fun with Arcs and Canvas in HTML5

Earlier today, I spent a few minutes playing around with the 2D drawing context for the HTML5 canvas element and came up with the following simple example:

This example (above) shows how to animate a series of arcs (i.e. circles) over time on the HTML5 canvas. The blending of arcs that occurs is accomplished by applying a decreasing alpha value to each arc for each pass the drawing code executes over time. Alternatively, these arcs are removed if they hit the top of the context boundary.