A smooth circle in Html5

Question

I'm trying to draw a circle with a canvas in HTML5. I use an example from w3schools, but the result is ugly, not smooth. Is it possible to have a smooth circle ? (I tried this with Chrome and IE9)

The code I use :

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(125,120,100,0,2*Math.PI);
ctx.stroke();

=> http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_path2 : the original example => http://jsfiddle.net/jPeKk/ : my try, bigger

Are you open to using css to build your circle instead? http://davidwalsh.name/css-circles — Calvin Cheng, Nov 04 '12 at 17:00
My aim is to build shapes that a user can edit (scale, rotation, ...). If the solution is to avoid the canvas, why not, but I'm a bit surprised with this result, it's a so basic feature... — fego, Nov 04 '12 at 17:09

score 0 · Answer 1 · edited May 23 '17 at 11:43

0

On chrome, this is a known issue that has been discussed here - Can I turn off antialiasing on an HTML <canvas> element?

and here - How to anti-alias clip() edges in html5 canvas under Chrome Windows?

Try

ctx.webkitImageSmoothingEnabled=true;

to make your line smoother.

edited May 23 '17 at 11:43

Community

1
1

answered Nov 04 '12 at 17:12

Calvin Cheng

35,640
39
116
167

thank you for your answer, but I didn't see a difference : http://jsfiddle.net/CSgGJ/ – fego Nov 04 '12 at 17:18

score 0 · Answer 2 · answered Dec 20 '14 at 16:19

Another solution that works for me (though I think it's more of a hack than a proper solution) is to draw a line around the circle with the same color. For some reason this is going to be very smooth.

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

context.beginPath();
context.arc(100, 100, 60, 0, 2 * Math.PI, false);
context.fillStyle = '#775599';
context.fill();

context.beginPath();
context.arc(200, 200, 60, 0, 2 * Math.PI, false);
context.fillStyle = '#775599';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#775599';
context.stroke();

A smooth circle in Html5

2 Answers2