[whatwg] Blurry lines in 2D Canvas

[Rik Cabanier]

On Thu, Sep 5, 2013 at 3:22 PM, Ian Hickson <ian at hixie.ch> wrote:

> On Tue, 23 Jul 2013, Rik Cabanier 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/
>
> Not always, only if you don't draw the line aligned with the pixel grid
> (e.g. you draw a diagonal line, or a horizontal or vertical line that
> isn't centered in the middle of pixels on the pixels grid, or a horizontal
> or vertical line whose width isn't an integral number of pixels, etc).
>
> The options, on a pixel grid display, are:
>
>  - don't honour the position precisely -- this leads to very ugly
>    artifacts when animating (lines jerk around), and basically means that
>    the graphics aren't accurate.
>
>  - instead of describing the shapes as vectors, describe them using
>    programs that can adapt to the position and size they're being drawn
>    at, such that they automatically snap to the pixel grid in a pretty
>    fashion -- this is what fonts do.
>
>  - try to trick the eye by using anti-aliasing when things don't line up
>    exactly on the pixel grid.
>
> The first two really aren't plausible options for <canvas>.
>
>
> On Wed, 24 Jul 2013, Kornel Lesiński wrote:
> >
> > For 1-pixel lines it could be fixed by allowing authors to specify that
> > path should be stroked with lines aligned to inside/outside of the path
> > (which is a useful feature on its own).
>
> https://www.w3.org/Bugs/Public/show_bug.cgi?id=22674
>
>
> On Tue, 23 Jul 2013, Rik Cabanier wrote:
> >
> > Sure, but how can we fix this?
>
> What is there to fix? The options above are basically the only options.
> You can't not do one of them -- there's no way to draw a crisp line that
> isn't pixel aligned. There's no pixels there. Similarly, there's no way to
> draw a line that's neither horizontal nor vertical yet is crisp and
> doesn't look jaggy. The pixels are squares, they don't rotate on modern
> pixel displays.
>
>
> On Wed, 24 Jul 2013, Kornel Lesiński wrote:
> >
> > Should arc() and bezier curves also be snapped? What if you want a line
> > that touches the curve?
>
> That's precisely the problem with snapping -- it is far worse than
> antialiasing. You can't draw precise shapes if you have snapping.
>
>
> On Wed, 24 Jul 2013, Dirk Schulze wrote:
> >
> > Means implementations would need to take viewport, transformations of
> > the document, transformations on elements in the DOM hierarchy, zoom
> > level, aspect ratio of the canvas, position of the canvas in the
> > document, transformations in the canvas and device pixel resolution into
> > account to snap lines to the correct position on the individual device,
> > right?Otherwise it sounds to be hard to guarantee that you don't see
> > antialiased strokes and lines might snap more then just one device
> > pixel. This would also be a problem for aligning shapes to each other in
> > the canvas I guess. What happens on the next transformation after a
> > drawing operation. Say you draw a line that was snapped to the grid and
> > then you do scale(1.1, 1.1). Shall the implementation redraw the canvas?
> > After all it is an pixel image. A vector based drawing format would be
> > better suited for such a task.
>
> Indeed.
>
>
> On Sat, 10 Aug 2013, Rik Cabanier wrote:
> >
> > 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 created an example (in flash sorry) that shows the feature:
> > http://cabanier.github.io/BlendExamples/pixelsnap/pixelsnap.html
> > 2 sets of strokes move across the screen and are also scaled.
> >
> > The top strokes behave like canvas does today. They start of blurry and
> > during the animation they slowly get ticker. For some reason it doesn't
> > look very smooth.
> > The bottom strokes have hinting turned on. They are sharp at the
> beginning
> > and during the animation they stay the same size until the internal
> stroke
> > width is large enough. At that point you see a 'jump'.
> >
> > I think canvas should have a similar feature...
>
> Can you elaborate on how exactly you would want this to work? How would
> you avoid the alignment and distortion problems when applying this to
> anything less trivial than a rectangle?


Basically, this would *just* move the control points and the width of paths
so the strokes are always aligned to the pixel grid (This would take pixel
density and transformations into account).
After this, you would draw as usual.