HTML5 Canvas Animation Has Occasional Jitter / Hes

Question

In Firefox 11, I am experiencing an occasional jitter / hesitation / stutter in some basic animation using HTML5's canvas and translate.

Please see the following example... http://jsfiddle.net/ACRdx/

The configuration in the example above seemed to provide the smoothest animation at the specified rate of movement, of course with the exception of the occasional stutter.

Does anyone have any idea what may be causing this behavior?

Suggestions offered in a similar post did not seem to help and it has not been updated since June 2011. Also the example links are now broken. Please see...

Is there a solution for HTML5 canvas animation stutter?

Answer 1

Try cutting down your FPS. Could be that the browser for some reason has a hard time running. I messed with your code, it may also be that your imageMoveXDelta is too small. I bumped it up to 0.2, and it ran pretty smooth to me. Other than that, you should try to think of that as how many total frames its running before its done in order to get a good mixture.