[whatwg] Blurry lines in 2D Canvas

Rik Cabanier cabanier at gmail.com
Sat Sep 28 20:42:37 PDT 2013


On Fri, Sep 27, 2013 at 2:08 PM, Ian Hickson <ian at hixie.ch> wrote:

> On Thu, 5 Sep 2013, Rik Cabanier wrote:
> > On Thu, Sep 5, 2013 at 3:22 PM, Ian Hickson <ian at hixie.ch> wrote:
> > > 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.
>
> Can you define "aligned to the pixel grid"?
>
> If I have a line from x1,y to x2,y, followed by an arc from x2,y back to
> x1,y with radius r, what should happen and why?
>

Align the anchor points of all the segments. Don't change any of the
anti-aliasing behavior.


>
> What if they're draw as separate paths?


I'm unsure if I follow. That shouldn't make a different.
What might be different however, is if you draw a diagonal line in 1
segment or 2 since the middle point will be aligned to the grid in the
latter case.



More information about the whatwg mailing list