title: How to make Canvas Arcs having sharp angled arcs
body: <p>So for some reason I could sworn this was how <code>arc</code> always worked in the canvas tag, but unfortunately it doesn't.</p>
  <p>So what I expected and eventually want to have as the end result is this:</p>
  <pre><code>canvas.arc(x,y,r,0,360); //ik this should be Math.PI * 2 
  canvas.arc(x,y,r,0,270); //and other Math.PI * #
  canvas.arc(x,y,r,0,180); //But I used degrees to help show
  canvas.arc(x,y,r,0,90);  //how I'd like it to use it.
  </code></pre>
  <p>And it will make these circles:</p>
  <p><a href="https://i.stack.imgur.com/6Bodz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6Bodz.png" alt="enter image description here" /></a></p>
  <p>But unfortunely it does something way different, when you do the above code...
  It creates the <em><strong>STROKE</strong></em> part of the circle just fine, but filling it in just draws a line from start angle to end angle and fills it:</p>
  <p><a href="https://i.stack.imgur.com/xdCwY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xdCwY.png" alt="enter image description here" /></a></p>
  <p>The only solution I can think of is to somehow overide the filling process of the arc to <em>instead of</em> lineTo the other angle, first lineTo the center of the arc then back to the end angle. But I have no idea how todo that, and I also don't understand beizers enough to try to recreate the arc from scratch so it using my desired lineTo usage.</p>
  <p>To summary: How do I make my filled circles have actual &quot;angles&quot; in the center of the partial circle?</p>