title: radial percentage bar in canvas
body: <p>Bear with me as I'm really new to Canvas and just experimenting.</p>
  
  <p>I am trying to make a radial percentage bar in html Canvas with animation that makes it go round starting at 1 angle and ending at the defined end angle (it is not a circle it is like a pie with a chunk taken out)</p>
  
  <p>I've put the angles at 45 degrees away from the bottom just using trial and error with the figures.  What I am trying to do is make the inner arc animate round based on what percentage it is defined at but i can't find the right figures to "rotate" it.</p>
  
  <p>Also I need to be able to change the colour of the inner arc.</p>
  
  <p>Another thing I was struggling with was how to take that outside static bar out of the animation without breaking it.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;canvas id="myCanvas" width="250" height="250"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>SCRIPT:</p>
  
  <pre><code>var canvas = document.getElementById('myCanvas');
   var context = canvas.getContext('2d');
   var x = canvas.width / 2;
   var y = canvas.height / 2;
   var radius = 75;
   var endPercent = 100;
   var curPerc = 0.75 * Math.PI;
   var counterClockwise = false;
   var circ = Math.PI * 2;
   var quart = Math.PI / 2;
   var startAngle = 0.75 * Math.PI;
   var endAngle = 2.25 * Math.PI;
  
   context.lineWidth = 10;
   context.strokeStyle = '#ad2323';
  
  
   function animate(current) {
       context.clearRect(0, 0, canvas.width, canvas.height);
       context.beginPath();
       context.arc(x, y, radius, startAngle, endAngle, false);
       context.stroke();
       context.closePath();
  
       context.beginPath();
       context.arc(x, y, 50, 0, ((circ) * current) - 0.5 * Math.PI, false);
       context.stroke();
       context.closePath();
       curPerc++;
       if (curPerc &lt; endPercent) {
           requestAnimationFrame(function () {
               animate(curPerc / 100)
           });
       }
   }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/susannalarsen/Lnav9w49/" rel="nofollow">http://jsfiddle.net/susannalarsen/Lnav9w49/</a></p>