如何使HTML5画布的弧形像素化程度降低，或更抗锯齿？

Question

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?

This is the code used to create the arc above

  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();

Answer 1

I don't think you can short of using a retina display (not trying to be sarcastic).

You can give the illusion of more smoothness by having less contrast between the arc and the background.

If you were drawing lines rather than arcs, you could turn off anti-aliasing in Chrome to make the lines sharper.