html - setTimeout or setInterval or requestAnimationFrame

Question

For HTML5 games,with canvas animation for mobile devices.

I'm facing some performance issues which differ the speed between each device and the others.

requestAnimationFrame speed the animation of the game according to the device speed.
setInterval shocked me that there are a delay from a device to another.
setTimeout is also slow the drawing on canvas.

Who had a previous experience with Mobile HTML5 games can guide me throw the best way of three of them (or other techniques if available) for developing animation on canvas be stable on different mobile devices ?

Answer 1

Always use requestAnimationFrame when possible, since that's what it's meant for. It's best to use a shim for support when it isn't, so you don't need to deal with the specific details.

In order for animation or game logic to perform at the same speed despite of actual method used, you should use time based animation and time based calculations for physics or such.