Search code examples
javascripthtmlcanvasdrawing2d

Imperfect Ball drawing on HTML5 Canvas


HTML5 Canvas seems to be drawing imperfect balls on certain conditions. When there's a red background, and a blue circle with a black outline, it seems the outline is wider in the left side and thinner in the right. Here's a fiddle illustrating this: https://jsfiddle.net/omgszg38/4/. Don't it seems to you too?
Here is the code that is drawing the ball:

d.beginPath();
d.fillStyle = "blue";
d.arc(x,y,radius,0,Math.PI*2,false);
d.fill();

d.lineWidth = 1; //Ball stroke

d.beginPath();
d.arc(x,y,radius,0,Math.PI*2,false);
d.stroke();

Note: I have already asked for help about this in another forum and here is it, if you need more info: http://www.webdeveloper.com/forum/showthread.php?359393-Imperfect-Ball-drawing-on-HTML5-Canvas

Solution

  • It may be an optical illusion. if you set the stroke to white it appears fine.