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

(The below is about Canvas only; I'm not very familiar with SVG.  I think
they should be two separate discussions.)

On Tue, Jul 23, 2013 at 6:19 PM, Rik Cabanier <cabanier@gmail.com> wrote:

> we've noticed that if you draw lines in canvas or SVG, they always end up
> blurry.
> For instance see this fiddle: http://jsfiddle.net/V92Gn/128/
>
> This happens because you offset 1 pixel and then draw a half pixel stroke
> on each side. Since it covers only half the pixel, the color gets mapped to
> 50% gray.
> You can work around this by doing an extra offset of half the
> devicepixelratio,


For Canvas, you should always add 0.5, since you're in the canvas
coordinate space, before the pixel ratio is applied.

This is the same coordinate system used by OpenGL and Direct3D 10 (and up),
with pixels centered around 0.5x0.5.  That is, a pixel sits between 0x0 and
1x1.  If you're specifying the center of the line (eg. where the stroke
grows outwards from), you need to add a half pixel.  (When you're
specifying a bounding box, such as drawImage, you don't, since you're at
the edge rather than the center of a pixel.)

I'm not sure if there's a way to disable antialiasing for paths.  Disabling
antialiasing to allow people to specify wrong coordinates only seems like
it would be more confusing, though.  The only solution is to educate people
about when and why they need to add a half pixel; even if there was a way
to avoid this in general (I'm not sure there is, for an API with Canvas's
functionality), it's much too late to change this.

-- 
Glenn Maynard

Received on Wednesday, 24 July 2013 01:20:40 UTC