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

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

From: Glenn Maynard <glenn@zewt.org>
Date: Sat, 10 Aug 2013 00:07:18 -0500
Message-ID: <CABirCh-NiwtSMzs5J5=cqazNYGAKufA3s1Lz1cW-6YvhGbt8pg@mail.gmail.com>
To: Rik Cabanier <cabanier@gmail.com>
Cc: WHAT Working Group <whatwg@whatwg.org>, bdahl@mozilla.com, Stephen White <senorblanco@chromium.org>, w3c@junglecode.net
On Fri, Aug 9, 2013 at 11:07 PM, Rik Cabanier <cabanier@gmail.com> wrote:

> How would you fix a 1.5 pixel width for the stroke or a 1.5 transform?

By snapping the final, post-transform width of the stroke to an integer.
If you scale by 1.25, eg. ctx.scale(1.25, 1.25), then draw a stroke with a
lineWidth of 1.5, the resulting width is 1.875 pixels.  That would be
rounded up to 2 pixels, after applying the transform (scale) and before
invoking the "trace a path" algorithm.

> Chrome seems ignore stroke widths that are smaller than 1 (which is
>>> reasonable).
>> (That seems wrong to me--it should continue to draw based on pixel
>> coverage--but that's a separate issue...)
> Is it? Obviously you can't draw less than a pixel, but the user did
> specify that he wants it too look black.

strokeStyle = "black" doesn't mean "every pixel in the stroke should be
black".  It's the color of the pen.  If you draw over half of a pixel with
a black pen, you get 50% grey.

It'd be one thing if Chrome didn't antialias at all, but if Chrome is
antialiasing a stroke with a lineWidth of 1.5, it doesn't make sense that
it's not antialiasing a stroke with a lineWidth of 0.75.  I don't think
this is strictly specified; the only mention of anti-aliasing is an example
of how to do it (oversampling).

This is tangental, though.  Might want to start another thread if you want
to go over this more, or we'll derail this one...

Glenn Maynard
Received on Saturday, 10 August 2013 05:07:42 UTC

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