title: Canvas rotate circle in certain speed using RequestAnimationFrame
body: <p>I made a quick simple solution in JSFiddle, for better and faster explaining:</p>
  
  <pre><code>var Canvas = document.getElementById("canvas");
  var ctx = Canvas.getContext("2d");
  
  var startAngle = (2*Math.PI);
  var endAngle = (Math.PI*1.5);
  var currentAngle = 0;
  
  var raf = window.mozRequestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      window.oRequestAnimationFrame;
  
  function Update(){
      //Clears
      ctx.clearRect(0,0,Canvas.width,Canvas.height);
  
      //Drawing
      ctx.beginPath();                  
      ctx.arc(40, 40, 30, startAngle + currentAngle, endAngle + currentAngle, false);
  
      ctx.strokeStyle = "orange";
      ctx.lineWidth = 11.0;
      ctx.stroke();
  
      currentAngle += 0.02;
      document.getElementById("angle").innerHTML=currentAngle;
      raf(Update);
  }
  raf(Update);
  </code></pre>
  
  <p><a href="http://jsfiddle.net/YoungDeveloper/YVEhE/3/" rel="noreferrer">http://jsfiddle.net/YoungDeveloper/YVEhE/3/</a></p>
  
  <p>As the browser chooses the fps, how would I rotate the ring independently from frame speed. Because for now, if speed is 30fps it will rotate slower, but if 60fps faster, because its rotate amount is added for each call. </p>
  
  <p>As i understand from couple of thread it has something to do with getTime, i really tried but could not get it done, i would need to rotate it once in 10 seconds.</p>
  
  <p>The other thing is, angle, it will increase more and more, and after long long time it will crash because variable max amount will be exceeded, so how do i make seamless rotate cap ?</p>
  
  <p>Thank you for reading!</p>