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

[Glenn Maynard]

On Fri, Jul 26, 2013 at 11:24 AM, Rik Cabanier <cabanier at gmail.com> wrote:

> - First, add the inner and/or outer stroke modes.  This seems useful in
>> and of itself, but the purpose here is to make it so integer coordinates
>> give hard edges, whether or not you have a 1px stroke.
>>
>
> I'm unsure why this is a requirement... (Not that it wouldn't be nice to
> have)
>

Without this, snapping to integer pixels doesn't prevent aliasing, since to
get a hard-edged 1px stroke you need to use half-pixel coordinates.
 (Instead, it would cause it.)


>
>
>>  - Second, add a mode which causes coordinates to be snapped to
>> integers.  This would happen when you make the API call, and be applied
>> after the canvas transform.
>>
>> If you're in scale(1.25), and you call rect(100, 100, 75, 75), it would
>> draw a rect from 100x100 to 194x194, instead of to 193.75x193.75.
>>
>
> You probably mean 125x125 to 194x194. Also, if there's a stroke width of
> 1, it would stay the same thickness.
>

Rather, 125x125 to 238x238 (both the origin and the size are affected by
the scale).


> Basically, Canvas would draw artwork like CSS does. A 1 pixel line would
> stay 1 pixel until the pixel ratio is 2.
>

Yeah, you would need to round line widths too.  A 1.5 pixel line width
would round to 2px.


>
>
>> This would give clean output for rounded edges, since you're adjusting
>> the size of the path as a whole.  It would work for fills (which also get
>> aliased edges when transformed).  It also works if the fill is a pattern,
>> where turning off antialiasing would make the pattern ugly.
>>
>
> I *think* you only want to do it for strokes because otherwise you might
> get seams.
>

I'm not sure.  Edges that should be aligned should round to the same value.

The same aliasing happen with filled rects (a rect from 0x0-10.25x10x25
will be aliased on the right and bottom edges), so this is trying to
address it in general rather than just for strokes...

-- 
Glenn Maynard