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

Re: [whatwg] Antialiasing of line widths < 1 (was Re: Blurry lines in 2D Canvas (and SVG))

From: Glenn Maynard <glenn@zewt.org>
Date: Sat, 10 Aug 2013 09:50:49 -0500
Message-ID: <CABirCh_DEz8MC+=5FR_xWjXuYYXBosx3DM0RcPEc-KUyEx=56A@mail.gmail.com>
To: Stephen White <senorblanco@chromium.org>
Cc: WHAT Working Group <whatwg@whatwg.org>, bdahl@mozilla.com, Rik Cabanier <cabanier@gmail.com>, w3c@junglecode.net
On Sat, Aug 10, 2013 at 7:42 AM, Stephen White <senorblanco@chromium.org>wrote:

> Chrome (well, Skia actually) uses a "hairline" mode for line widths < 1.
> It draws a line of width 1, and uses the width to modulate the alpha.  I
> think the idea is to prevent blotchiness/unevenness caused by undersampling
> or missed coverage (Skia uses 16 samples of AA).

That sounds like it should be fine, since it should give results similar to
what users would expect from simple coverage antialiasing.

I'm not sure that's what I'm seeing, though.  http://jsfiddle.net/eZEyH/1/
The 0.001 width stroke is being drawn solid black in the pixel-centered
(left) case.  In the right one, horizontally aligned to the edge of a
pixel, the stroke disappears.  (I left it vertically pixel-centered, so the
box didn't disappear entirely.)  The right is what I'd expect to always
happen with a lineWidth that thin.  Similar things happen with thicker
widths, the 0.001 just makes it very easy to see.

This can become visible during animation, eg. http://jsfiddle.net/xSUuB/1/.
In Chrome, the line flickers between solid black and grey.  In Firefox,
it's antialiased normally, so it consistently appears grey (actually
shifting between one pixel of grey and two pixels of lighter grey).

Glenn Maynard
Received on Saturday, 10 August 2013 14:51:16 UTC

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