[whatwg] Blurry lines in 2D Canvas (and SVG)
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
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
> 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...
More information about the whatwg