Question

So I have a rotating canvas element which has an arc drawn inside it (the smaller planet):
http://jsfiddle.net/neuroflux/9L689/4/ (updated)

But I can’t seem to get the anti-aliasing on the edges of the smaller planet smoother – any ideas?

Cheers!

edit: is there a way to increase the number of iterations used within an arc?

Answer 1

Your problem is not that the arc doesn’t have enough points, but that in Chrome the .clip() operation doesn’t use anti-aliasing to produce the clipping path.

See Chromium Issues 7508 and 132442

To see this in action, look at http://jsfiddle.net/alnitak/YMtdZ/ in Chrome.

markup:

<canvas id="c" width="600" height="300" />

​
code:

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'black';

ctx.save();
ctx.beginPath();
ctx.arc(150, 150, 140, 0, 2 * Math.PI);
ctx.clip();
ctx.fillRect(0, 0, 600, 300);
ctx.restore();

ctx.beginPath();
ctx.arc(450, 150, 140, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();

​The left-hand circle is drawn with clipping, and is aliased. The right-hand circle is drawn “normally”, and is anti-aliased.

FWIW, in Firefox and Safari both images look the same. I can’t test it on IE.

The only work around I can imagine (until Chrome gets fixed) would be to render the image off-screen into a canvas 3 or 4 times larger, and then copy that with down-sampling into the displayed canvas.