html canvas animation stutter

Question

Can anyone explain why the provided canvas animation stutters? I've created a test stub which demonstrates the problem.

I see the stutter in FF, Chrome, IE on desktop and in FF and Chrome on Android.

Is the stutter due to garbage collection? It seems even raf generates a double on each call which eventually requires gc. If gc is the cause then html5 animation is pretty much doa. Sigh.

The same question was asked a year ago but because I'm a new member I'm not able to contact the author to find out his solution. HTML5 Canvas DrawImage Stutter / Choppiness . It is really too bad there is no way for a new user to get another user's attention, since the author of that other question may have the information I'm looking for, an simply hasn't posted it. I tried posting to his question in an effort to get his attention, but my post there was deleted as a rules violation(which is was). Guess I'm out of options. Chicken and egg problem with rep.

Answer 1

Ok, so after pulling my hair out for 1.5 days I think I have an answer. It appears browsers vsynch to a monitor, which I guess is the point of calling requestAnimationFrame. It appears the synch mechanism can get confused when running on a multi monitor system. I have three monitors. When I disconnect all but one monitor and restart the browser, the problem appears to go away. This kind of makes sense given that the problem manifests sporadically, ie I'm guessing when a given monitor gets out of synch with which ever monitor is providing vsynch to the browser.

Since I'm not certain about this I'm hoping others can confirm or shoot down my theory. I'll continue to (re)test with different monitor configurations, but it would be nice to get confirmation from another brain and set of eyes.

Edit 01: I'm not completely nuts. http://news.softpedia.com/news/Firefox-Nightly-Adds-Support-for-Vsync-for-Smooth-Animations-360245.shtml

Edit 02: Some chrome users/devs has discovered this or a related problem. Finally something might be done with this issue. See https://code.google.com/p/chromium/issues/detail?id=422000. BTW, IE11+ does not have this issue. Started using IE11 for baseline testing, since chrome is having QA issues lately.

Edit 03: Just ran across this q&a which is similar. Good info in the first answer. Chrome requestAnimationFrame issues