W3C home > Mailing lists > Public > whatwg@whatwg.org > August 2013

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

From: Stephen White <senorblanco@chromium.org>
Date: Fri, 9 Aug 2013 17:17:13 -0400
Message-ID: <CAPeKFThd5HvtYFvokX=n7UR_Qs=wmqHy2vMFDoDs9y9Jd5jM=Q@mail.gmail.com>
To: Rik Cabanier <cabanier@gmail.com>
Cc: WHAT Working Group <whatwg@whatwg.org>
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@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?
>
Received on Friday, 9 August 2013 21:17:37 UTC

This archive was generated by hypermail 2.3.1 : Monday, 13 April 2015 23:09:23 UTC