[whatwg] Blurry lines in 2D Canvas

[Ian Hickson]

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?

-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'