javascript - Rendering and jaggering -

i have html 5 canvas using 2d context. able 120 frames per second, rendering can jagged, animation jumps. know ideas may causing it, such high (but pointless) frame rate? known ways or smoothing out animation well?

the thing come mind, actual drawing not being accounted for. while updating , drawing functions can run quickly, painting onto canvas stacked later. imply not geting true frames per second.

although, can 120 frames per seconds means nothing. because using settimeout, have not guarantees time constant, thus, when jagger, because frame rate, moment, has dropped significantly.

however, there alternative in works, managed found. i'm bit surprised how hard find.

http://paulirish.com/2011/requestanimationframe-for-smart-animating/ https://developer.mozilla.org/en/dom/window.mozrequestanimationframe http://dev.chromium.org/developers/design-documents/requestanimationframe-implementation

from can understand, function allows browser optimise animations. in theory, should give more consistent frame rate, should give smoother animations.

it quite interesting compare how chrome, safari, opera , firefox draw. test on chrome 14 dev , mozilla aurora 6.0a, , way draw different. chrome seems able draw directly. firefox seems piping pixels, if it's sending them 1 one drawn.

which leads me opera

http://www.scribd.com/doc/58835981/122/double-buffering-with-canvas http://www.felinesoft.com/blog/index.php/2010/09/accelerated-game-programming-with-html5-and-canvas/

turns out webkit-based browsers , gecko-based browsers use double buffers internally, is, collects drawing functions , draws them on return of function thread. if have main loop function, update, won't draw until has returned. opera, draws them drawing functions called, it's not hard implement double buffering. is, supposably, method of smoothing out animation.

there experimental feature may well

http://badassjs.com/post/4064873160/webgl-2d-an-implementation-of-the-2d-canvas-context-in