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

Glenn Maynard glenn at zewt.org
Fri Jul 26 09:54:20 PDT 2013

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

More information about the whatwg mailing list