Is there a solution for HTML5 canvas animation stutter?

Question

I am working on a HTML5 canvas animation (to be more precisely a photo slideshow). So far all my slideshows are in flash because last time (March 2010) I looked ihe framerat

Answer 1

It seems to be fine in FF5 on Windows 7. Also seems smooth on IE9.

I think part of the problem may be that your interval is too small. On slower devices, it may go 66 frames per second when it can but then drop down to far fewer, then go back up to 66fps, giving a stutter effect.

By giving a very fast interval, you're effectively telling it to run as fast as it can, and it apparently needs to catch its breath. Maybe not though, maybe there's something else at work.

Try using an interval of 50ms and see what happens.

And for kicks, instead of using setInterval, see if using requestAnimFrame helps your problem at all. It may have the same problems as the fast interval though.

// shim for requestAnimFrame with setTimeout fallback
    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function(/* function */ callback, /* DOMElement */ element){
                window.setTimeout(callback, 1000 / 60);
              };
    })();


    // usage: 
    // instead of setInterval(render, 16) ....

    (function animloop(){
      render();
      requestAnimFrame(animloop, element);
    })();