title: How to create a custom circle with arc method?
body: <p>I want to customize <code>arc()</code> function to be able to make my own circle, but I can't get it to draw a flattened cicrle.</p>
  
  <p><a href="https://i.stack.imgur.com/biuwF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/biuwF.png" alt="enter image description here"></a></p>
  
  <p>How can I do this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.arc(100, 75, 50, 0, 2 * Math.PI);
  ctx.stroke();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="myCanvas" width="200" height="150" style="border:1px solid #d3d3d3;"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>