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

[Rik Cabanier]

On Tue, Jul 23, 2013 at 5:34 PM, Kornel Lesiński <kornel at geekhood.net>wrote:

> 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<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).


Sure, but how can we fix this?
It's not very intuitive that I have to keep track of the devicePixelRatio
(and the current CTM?) to get crisp lines.

What we need is that artwork 'snaps' to the native pixels while still being
antialiased.

Illustrator tries to work around this by offering a 'snap to grid' option
but users are running into lots of issues (just do a google search for
'illustrator snap to grid')