title: HTML5: Fill circle/arc by percentage
body: <p>Here is my pseudo code:</p>
  
  <pre><code>var percentage = 0.781743; // no specific length
  var degrees = percentage * 360.0;
  var radians = degrees * Math.PI / 180.0;
  
  var x = 50;
  var y = 50;
  var r = 30;
  var s = 1.5 * Math.PI;
  
  var context = canvas.getContext('2d');
  context.beginPath();
  context.lineWidth = 5;
  context.arc(x, y, r, s, radians, false);
  context.closePath();
  context.stroke();
  </code></pre>
  
  <p>I'm using the <a href="http://www.kineticjs.com/" rel="nofollow">KineticJS</a> library to control the shapes I make and redraw them as necessary. My problem is that the above code does not work at all. I assume I have the math incorrect, because if I change <code>radians</code> to something like <code>4.0 * Math.PI</code> is draws the entire circle.</p>
  
  <p>I've been using <a href="http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/" rel="nofollow">HTML5 Canvas Arc Tutorial</a> for reference.</p>