4

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?

an arc drawn in html5 canvas

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();
<canvas id="myCanvas"></canvas>
ggorlen
  • 44,755
  • 7
  • 76
  • 106
Reshma
  • 492
  • 3
  • 9
  • 23
  • 2
    I don't see where is the problem: http://jsfiddle.net/DerekL/eu6uK/ – Derek 朕會功夫 May 01 '13 at 05:47
  • look at the top of the arc and u can see its not smooth . that is the problem . and i need to know if there is any way to make it smooth without a grain effect on outside – Reshma May 01 '13 at 06:20
  • It's already anti-aliased on my browser: http://i.stack.imgur.com/9jXHx.png (both Chrome and Firefox) – Derek 朕會功夫 May 01 '13 at 06:21
  • I didn't see any problem either... By the way your code is fairly standard in html5. I think one of your problem may be css style. http://stackoverflow.com/questions/6032263/html5-canvas-anti-alias. If your canvas is scaled up by css, it does not acquire additional pixel and thus gets resolution quality down. – Herrington Darkholme May 01 '13 at 06:24
  • used context.lineCap = 'round'; and context . shadowBlur [ = value ] but it will give only little effects and only at the end of the arc – Reshma May 01 '13 at 06:27
  • 3
    Possible duplicate of [HTML5 Canvas stroke not anti-aliased](https://stackoverflow.com/questions/12164780/html5-canvas-stroke-not-anti-aliased) –  Nov 22 '17 at 09:16
  • @user719662 I don't think that dupe is related to this--that's a repeated drawing while this is one-shot, unless OP isn't showing all of their code. – ggorlen Sep 02 '22 at 17:19

1 Answers1

2

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.

markE
  • 102,905
  • 11
  • 164
  • 176
  • is there any programatic way to make arc smoother. (we cannot expect some one to use higher resolution systems right) – Reshma May 01 '13 at 06:26
  • 3
    Not that I've found--and I've looked mightily. The arc highlights the sins of rectangular pixels used on computer monitors. It's like the old phrase "can't put a round peg in a square hole". If it fits your design, you might seriously consider using less contrasting colors for your arc and background. Alternatively, a solid black background fools the eye into seeing a smoother orange arc--hence the popularity of darker or black background sites. Sorry, I don't think there's a good solution out there for your situation. – markE May 01 '13 at 06:36