[whatwg] Stroking algorithm in Canvas 2d

Rik Cabanier cabanier at gmail.com
Thu Oct 10 10:37:52 PDT 2013

On Thu, Oct 10, 2013 at 8:28 AM, Justin Novosad <junov at google.com> wrote:

> On Thu, Oct 10, 2013 at 2:19 AM, Ian Hickson <ian at hixie.ch> wrote:
>> On Wed, 9 Oct 2013, Rik Cabanier wrote:
>> > > >
>> > > > Yep, this is where assumptions went wrong. Dashes are calculated per
>> > > > subpath, not per 'line'/whole path.
>> > >
>> > > On what basis are you asserting this?
>> >
>> > see this fiddle: http://jsfiddle.net/6eGxU/25/
>> This demonstrates pretty well what is wrong with the algorithm you're
>> suggesting (and which is implemented in Chrome). Why shouldn't we take
>> this opportunity to fix it?
> Wrong? That really depends on what you are trying to do.
>> Here's an even better example of the problem:
>>    http://goo.gl/hwK7fv
> So in the case of a box, it makes perfect sense for the corners to be
> start/stop points in the dashing pattern.  It gives a reassuring sense of
> symmetry to the drawing.
> On the other hand, if you are drawing a continuous curve in a graphing
> application, you would want constant density in the dashing pattern even
> though the curve way be built from a series of subpaths.
>  The algorithm suggested by Rik allows for both, but is not ideal.
> Basically: dashing is continuous over joins. If you want to insert a break
> point in the dashing pattern, you just end the current path and start a new
> one, or break continuity by calling moveTo like you (Ian) did in the fiddle
> cited above.
> The main issue I see with that algorithm is that it does not solve the
> case where you would want a join and a dashing break at the same point. I
> think that is an important case to support, in particular for drawing
> rectangles.

Can you send a screenshot/jsfiddle about what you're trying to accomplish?

> One way we could address this by adding a new path method that inserts a
> break in the dashing pattern (without unjoining the subpaths).
> Also, I think it should be implicit in the rect() path primitive that the
> corners are joined and that they are also stop/start points for the dashing
> pattern.

That would break current behavior . We will need a new API or additional
arguments (a dash array?)

More information about the whatwg mailing list