Slow Down For Loop To Animate Canvas

I'm trying to make something using canvas, where I can pass in a number, which would equal a certain degree 0-360, and a line would animate from where ever its current position is

Solution 1:

You need to use something like setInterval to call a piece of code every N milliseconds. The syntax is:

setInterval(code, milliseconds);

It returns a number that you need to save so you can stop the code. So we can write:

var interval = setInterval(function() {
     clock();
     x++;
     if (x > 90) clearInterval(interval);
 }, 30);

This creates a function that occurs every 30 milliseconds.

Every 30 milliseconds, clock() is called, x is incremented, and if x is more than 90 we call clearInterval and pass in the number that our call to setInterval returned. This makes sure that the code open happens 90 times total.

Here's a live example:

http://jsfiddle.net/WPTjv/10/

Solution 2:

Here you go: http://jsfiddle.net/WPTjv/3/