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

[Rik Cabanier]

On Fri, Aug 9, 2013 at 10:07 PM, Glenn Maynard <glenn at zewt.org> wrote:

> 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.
>

Ah, so you are relying on pixel snapping (=rounded up to 2 pixels). If you
can do that with your approach, why not with strokes that are drawn from
the center?


>
>>
>>  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.
>

Yes.
Does the author want to see the appearance of the 'thin-ness' of the
stroke, or is he more interested in the color?

I was wondering if this is something that happens in Flash as well. It
turns out that there's an option called "hinting: Keep stroke anchors on
full pixels to prevent blurry lines." There's a blog post on what this
does:
http://www.kaourantin.net/2005/08/stroke-hinting-in-flash-player-8-aka.html
<http://www.kaourantin.net/2005/08/stroke-hinting-in-flash-player-8-aka.html>

I created an example (in flash sorry) that shows the feature:
http://cabanier.github.io/BlendExamples/pixelsnap/pixelsnap.html
2 sets of strokes move across the screen and are also scaled.

The top strokes behave like canvas does today. They start of blurry and
during the animation they slowly get ticker. For some reason it doesn't
look very smooth.
The bottom strokes have hinting turned on. They are sharp at the beginning
and during the animation they stay the same size until the internal stroke
width is large enough. At that point you see a 'jump'.

I think canvas should have a similar feature...


> 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...
>