title: How can I make my HTML5 canvas arc less pixellated, or more anti-aliased?
body: <p>The following arc is drawn in HTML5 canvas. How can I make the outside of the arc smoother and less pixelated, or more anti-aliased?</p>
  <p><img src="https://i.stack.imgur.com/tFBFt.png" alt="an arc drawn in html5 canvas" /></p>
  <h3>This is the code used to create the arc above</h3>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var img = new Image();
  var x = canvas.width / 2;
  var y = canvas.height / 2;
  var radius = 100;
  var startAngle = Math.PI;
  var endAngle = 2 * Math.PI;
  var counterClockwise = false;
  var outX = x
  var outY = y
  var vari1 = .1;
  var endAngle = startAngle + vari1 * Math.PI;
  context.beginPath();
  context.arc(outX, outY, radius, startAngle, endAngle, counterClockwise);
  context.lineWidth = 25;
  context.strokeStyle = '#FA603D';
  context.stroke();
  context.closePath();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="myCanvas"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>