Drawing zero length closed subpaths

It is unclear how to draw closed subpaths with zero length [1], for
instance ‘M0,0L0,0Z’ and ‘M10,10C10,10,10,10,10,10Z’. The spec doesn’t
explicitly say what to do in this case (except M0,0Z) and browsers are
currently drawing these inconsistently. These are the options:

    1. Draw nothing. (Chrome, Opera)
    2. Draw a dot using stroke-linecap (Safari, FF, Edge)
    3. Draw a dot using stroke-linejoin (my suggestion)

The third option is my suggestion and isn’t currently implemented by any
browser. I made an animation showing why it would make sense to use
stroke-linejoin instead of linecap. This example has an open subpath (a
line which works fine) and a closed subpath (a triangle which looks odd
with option 1 or 2): https://jsfiddle.net/mqm8vbt4/ (the animation uses
SMIL, but works in Safari, FF and Chrome48).

Option 3 would keep the triangle animation consistent. The triangle has a
round line join, so the dot would be drawn as a circle instead of a square
or disappearing.

Which option is the way to go? The browsers draw line caps or nothing, but
would it make sense to use line join? It feels wrong to draw closed paths
with line caps.


[1] https://bugs.chromium.org/p/skia/issues/detail?id=4784

Received on Monday, 25 January 2016 07:55:57 UTC