Reducing flicker in CANVAS animations

[urbanjost]

I am trying to find the best way to reduce flicker in simple animations using the HTML5 CANVAS element.

So far, the best I have come up with is to do a poor-man's double buffer
between two adjacent canvas elements. There is an example at

http://home.comcast.net/~urbanjost/canv ... asma2.html

based on the best similar example I could find.

Is there a better way to do this? An example would be appreciated. If not, does anyone else think ping-pong
buffering or planes should be added to CANVAS? Or is animation "too much" for
the intended uses of a CANVAS element?

[xul-vipz]

I see no flicker (tested in FF2 and FF3b3), but that could have something to do with the framerate: max 1.1 ...

ps: Opera 8.25 does it somewhat better: 1.4, but still no flicker

[urbanjost]

I added some controls that let you trade off speed for resolution or size.
Safari has no flicker, Firefox does; Opera has a lot according to my trials.

You MUST select the "TURN OFF BUFFERING" control or you will see no
flicker because of the work-around I was testing.

I added a clear in-between renderings to make the flicker more obvious.
It could be masked by the previous frame.

Increase the CANVAS size or decrease the PIXEL SIZE value and the flicker
will appear in Firefox or Opera.

You can get rates over 60 FPS by making the PIXEL SIZE large, but the graphics become far less interesting.

The controls are of the form << LABEL >>. useYou can hover over the <> characters and the values will change. If you click on the <> characters
they will change in larger increments in general. If you click on the LABEL
string you will get a pop-up asking for a value. By turning on/off different
options I learned a lot about CANVAS rendering speed, JavaScript speed,
and odd things that the browsers do when pushed. So far, I haven't gotten
the speeds I need to be useful. Suggestions (including whether I need to give up or not) are very welcome. Thanks for the feedback.