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

Glenn Maynard glenn at zewt.org
Fri Aug 9 22:07:18 PDT 2013

On Fri, Aug 9, 2013 at 11:07 PM, Rik Cabanier <cabanier at 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

More information about the whatwg mailing list