Question

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 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?

Answer 1

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/