title: HTML Canvas draw arc between two points
body: <p>I have found similar questions out there, but no answer. I have sketched a circle like so</p>
  
  <pre><code>ctx.strokeStyle='rgb(0,0,0)';
  ctx.lineWidth=10;
  ctx.beginPath();
  ctx.arc(100,100,45,0,Math.PI*2,true);
  ctx.closePath();
  ctx.stroke();
  </code></pre>
  
  <p>which gives a circle situated at (100,100) with radius 45, plus 5 for the linewidth, making it a circle of radius 50. Now, I want to sketch the exact same circle, but another color, and only 1/4 of the original circumfrance (think the XBOX 360 red ring of doom). So I tried this</p>
  
  <pre><code>ctx.strokeStyle='rgb(0,250,0)';
  ctx.lineWidth=10;
  ctx.beginPath();
  ctx.arc(100,100,45,0,Math.PI/2,true);    //use 1/4 of original angle
  ctx.closePath();
  ctx.stroke();
  </code></pre>
  
  <p>But that has the really annoying aspect of connecting the first and last points (sometimes I wonder who created the canvas element, like when embedding text, but don't get me started on that...)</p>