Why my animation gets stuck sometimes in Firefox?

I am trying to create an animation using HTML5 canvas and Javascript. Although it works perfectly in Google Chrome, but in Firefox this ge开发者_JAVA百科ts stuck sometimes.

Live demo: http://jsfiddle.net/UbTwh/ .

I guess this is performance issue. Am drawing and clearing the canvas in a wrong way?

Runs fine for me; sounds like it's performance-related on your machine. What specs are you running? If your CPU is getting bogged down or Firefox is eating RAM, everything goes out the window in relation to stability; I've seen everything from DHTML to Flash freeze and die because of performance issues on the computer itself.

If you just want to boost performance on your local machine, I would refrain from clearing the entire picture for every frame. The vast majority of your circles do not need to be redrawn; even though it's easier, calling clear() every frame significantly increases your performance cost. Plus, it's a nice exercise. :)