3


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

Benur21
  • 33
  • 5
  • When I initially looked at it, it appeared to me to be thinner on the bottom than the top - but zooming in it appeared ok. After spending some time trying to figure out whether it's an optical illusion I realised that if you turn your head to the left the inner circle appears to move to the right and vice versa ... given the impression that it's thinner on one side than the other. It appears that this is nothing more than an optical illusion. – David Nov 06 '16 at 17:06
  • 1
    Maybe because of subpixel rendering. On an unrelated note, you don't have to draw the circle twice https://jsfiddle.net/ym5a5fdd/ – Alexey Lebedev Nov 06 '16 at 17:08
  • Have some magnifying glass? Try to count the pixels with it or with naked eye. – Benur21 Nov 06 '16 at 17:11
  • @AlexeyLebedev What do you mean with subpixel rendering? And that fiddle has also an imperfect ball. – Benur21 Nov 06 '16 at 17:13
  • @Benur21 It's too much to explain in a comment, just search for "subpixel rendering". This artifact is most prominent with red and blue, here's another example: https://jsfiddle.net/o0akgwnw/ All stripes have the same width, but some black stripes look narrower. My first fiddle only shows that you can save one `arc()` call, it's not supposed to look more symmetric. – Alexey Lebedev Nov 06 '16 at 17:27
  • https://jsfiddle.net/omgszg38/5/ – Benur21 Nov 06 '16 at 17:35

1 Answers1

1

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

Derek
  • 850
  • 9
  • 19
  • Turn your head (or screen). Why isn't it still wider in the right and thinner in the left? Center the ball on the canvas if you need. – Benur21 Nov 06 '16 at 17:05
  • Also the problem may be more with the fill() than stroke. If you remove the fill the border is even. – Derek Nov 06 '16 at 17:30
  • 1
    Chromostereopsis: http://luminanze.com/writings/chromostereopsis_in_ux_design.html – Carlos Mermingas Nov 06 '16 at 17:31