Is there a solution to animate HTML5 canvas stutter?
I am working on animating an HTML5 canvas (more precisely a photo slideshow). So far all my slideshows are in Flash, because last time (March 2010) I looked that the frame rate for Flash was much higher 3x - 4x compared to html5 canvas. Today it is said that current browsers have grabbed onto Flash, but all the html5 canvas samples I found stutter so far in the current Firefox and Chrome browsers.
The sample setInterval is set to 15ms, which should give a maximum of 60 frames per second. But on my laptop the animation stutters a lot: http://demo.webdevhub.net/canvas/simple/
Are there workarounds for at least modern browsers, or do I have to wait another year?
Best wishes, Mark
source to share
Everything seems to be fine in FF5 on Windows 7. Also IE9 seems to look smooth.
I think part of the problem might be that your spacing is too small. On slower devices, it can go 66fps when it can, but then it drops to much less, and then back to 66fps, giving a stutter effect.
By providing a very fast interval, you are effectively telling him to work as fast as he can and apparently needs to catch his breath. Maybe, though, maybe there is something else at work.
Try using a 50ms interval and see what happens.
And for kicks, instead of using setInterval, see if your requestAnimFrame helps your problem at all. This can have the same problems as the fast interval.
// 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);
})();
source to share
I am currently working on HTML5 BomberMan-clone and I tried to do some better JavaScript game implementations (google) at first, but in the end I ended up with a simple setTimeout (...) gameLoop :) setting.
And it seems to work quite nicely and smoothly. I still have a lot of work to do, but you can see the current dev version (setTimeout is set to 30 FPS, but if I set it to 60 FPS - no problem at all):
(and thanks to Simon for your comments on optimizing the drawing all the time here on StackOverflow)
source to share