speed of an animation in canvas depends on the js engine speed, is there a way to make an animation appear the same in all browsers?

this is a link to a canvas animation http://www.html5canvastutorials.com/advanced/html5-canvas-linear-motion-animation/

now just like with a regular js animation, the speed of it depends on开发者_如何学JAVA how fast the browser is with js. so my question is, does canvas have a way of bringing them all to the same level? or is there already a solution for this?

The problem is that, in Javascript, setInterval() does not give you reliable timing, especially if the browser is too slow to update a frame in the time alotted.

So for each frame you have to calculate time elapsed since the previous frame, and use that to update your position.

Here is a live example:

http://jsfiddle.net/txWqJ/1/

If you want the canvas to render at the same speed use

setTimeout(doMoreRendering, 1000 / fps)