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

[Stephen White]

I think one problem you might run into is that, if you consider a stroked
line to be centered on pixel centers rather than pixel edges, then the same
path when filled and stroked would touch different pixels along each edge.

Consider a 10x10 rectangle, drawn at coordinates coordinates 5, 5. If
filled, this would fill pixels 5-14 in X and 5-14 in Y. If stroked, this
will draw 1-pixel wide rectangles centered along (5, 5) -> (14, 5) -> (14,
14) -> (5, 5). With antialiasing this will touch pixels 4->15 in each
dimension.  http://jsfiddle.net/6KS4V/

If the stroke was instead drawn centered over half pixels, the stroked
rects would be centered along (5.5, 5.5) -> (14.5, 5.5) -> (14.5, 14.5) ->
(14.5, 5.5) -> (5.5, 5.5). This would touch pixels 5->15 in each dimension.
If drawn with transparency, the resulting left and top edges would look
different than the bottom and right edges.  E.g., http://jsfiddle.net/9xbkX/
.

(Please ignore blurriness induced by the CSS upscaling; you can remove the
CSS and use a zooming tool if you prefer).

Stephen



On Tue, Jul 23, 2013 at 7:19 PM, Rik Cabanier <cabanier at gmail.com> wrote:

> All,
>
> we've noticed that if you draw lines in canvas or SVG, they always end up
> blurry.
> For instance see this fiddle: http://jsfiddle.net/V92Gn/128/
>
> This happens because you offset 1 pixel and then draw a half pixel stroke
> on each side. Since it covers only half the pixel, the color gets mapped to
> 50% gray.
> You can work around this by doing an extra offset of half the
> devicepixelratio, but ideally this should never happen.
>
> Is this behavior specified somewhere?
> Is there a way to turn this off?
>