Fade out part of an HTML 5 canvas after drawing

As far as I understand HTML5's canvas doesn't allow access to elements after they are drawn because they immediately become graphic-mode.

I just came across the great demonstration of the HTML5 Audio API at http://www.storiesinflight.com/jsfft/visual开发者_StackOverflowizer/index.html, and I'm wondering how the circles shrink and fade out after they are drawn. (To see, just click pause and watch each arc element fade away into nothing.) How is this done? Snippets of the JS would be great.

Many thanks.

Note: I believe Firefox 4 is the only browser this runs on currently.

There are two questions you could be asking, so I'll try to answer both.

The short answer is "they keep track of everything and redraw it fading in and out." If you're just wondering how to get started with keeping track of some state, aka making Canvas act as if it were drawing in retained mode, see these tutorials.

In the specific example you gave they don't even need to keep track of anything if they don't want to, since the size and location of the circles are based on the current audio input at the current second, they simply wipe the entire canvas and take the input and turn it into appropriately sized and located circles every X milliseconds.

So the circles aren't fading out. They are being wiped completely and smaller circles are being drawn instead. It gives the effect of a fade-out, but the probably aren't keeping track of any state.

The code can store a circle object, with properties such as radius, x and y.

It can then animate these properties, and draw it on the canvas with an interval similar to a game loop.

It does not access DOM elements.