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

Glenn Maynard glenn at zewt.org
Mon Aug 12 18:45:21 PDT 2013

On Sat, Aug 10, 2013 at 9:43 PM, Rik Cabanier <cabanier at gmail.com> wrote:

> Ah, so you are relying on pixel snapping (=rounded up to 2 pixels).

Rounded to the nearest integer pixel.  If you give 1.25, the width would be

> If you can do that with your approach, why not with strokes that are drawn
> from the center?

It might be possible, in principle, to only snap the "border" of the stroke
instead of the whole thing, but I don't know how to do that or if it'd be
worthwhile.  It seems like sharp lines are only particularly important for
thin strokes (especially 1px), and in those cases the difference between a
center and an outer stroke are minor.  (I don't know if it's harder to
implement, eg. so there's no gap between a fill followed by an outer

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 don't know about this, but the description sounds similar to what I'm

Glenn Maynard

More information about the whatwg mailing list