[whatwg] Blurry lines in 2D Canvas (and SVG)

Kornel Lesiński kornel at geekhood.net
Tue Jul 23 17:34:59 PDT 2013


On Wed, 24 Jul 2013 01:18:35 +0100, David Dailey  
<ddailey at zoominternet.net> wrote:

> Just affirming what you've said in SVG:
> http://cs.sru.edu/~ddailey/svg/edgeblurs.svg
>
> The middle rects are crisp, having been merely translated leftward and
> downward by half a pixel. Zooming in from the browser rectifies the  
> problem
> (as expected) after a single tick.
>
> I remember folks discussing sub-pixel antialiasing quite a bit on the SVG
> lists circa fall/winter 2011. It seemed to cause some troubles for D3. Is
> that the same issue?

It's not a bug, it's a feature ;)

The line is centered around edge of the box. You haven't specified whether  
you want the line to be outside or inside the box (or overlapping left  
edge of the box, but not the right, etc.), so you get line in the middle  
approximated as well as possible.

It's not intuitive. It's a pretty common pitfall, but it's logical.

For 1-pixel lines it could be fixed by allowing authors to specify that  
path should be stroked with lines aligned to inside/outside of the path  
(which is a useful feature on its own).

-- 
regards, Kornel



More information about the whatwg mailing list