Canvas does not respect line cap behaviour for zero-length paths

• Component: Canvas
• Status: NEW ---

[Pierpaolo Follia]

Created attachment 428813 [details]
Output of linked example

When drawing a zero-length path in canvas using 'round' or 'square' line-cap, the output does not respect the correct behavior (the stroke should consist of a full circle/square centered at the path's point)

Live example here:

https://codepen.io/madchicken/pen/WNpxBXj

The top line is done drawing a zero-length path, the bottom one using a path of length 1px.

[Radar WebKit Bug Importer]

<rdar://problem/78388953>

[Said Abou-Hallawa]

WebKit drawing is different from the drawing of Chrome and FireFox. But I can't find the specs for this degenerate case.

We call moveTo() to a point and then we call lineTo() to the same point. So are we supposed to draw a dot at this point? Or should we just assume we are still at the same point and nothing is drawn?

[Pierpaolo Follia]

I don't think this can be considered a specification, but this is what I was able to find:

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap#round

The round value indicates that at the end of each subpath the stroke will be extended by a half circle with a diameter equal to the stroke width. On a zero length subpath, the stroke consists of a full circle centered at the subpath's point.

[Pierpaolo Follia]

Maybe this is more accurate:

https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-linecap

At point 9:

Caps: Each point has a flat edge perpendicular to the direction of the line coming out of it. This is then augmented according to the value of style's lineCap. The "butt" value means that no additional line cap is added. The "round" value means that a semi-circle with the diameter equal to style's lineWidth width must additionally be placed on to the line coming out of each point. The "square" value means that a rectangle with the length of style's lineWidth width and the width of half style's lineWidth width, placed flat against the edge perpendicular to the direction of the line coming out of the point, must be added at each point.

Seems that the zero-length path should have the semi-circle (or half-square) added to the line coming out of each point.

[Said Abou-Hallawa]

Created attachment 429610 [details]
Patch

[Said Abou-Hallawa]

These WPT tests 

imported/w3c/web-platform-tests/html/canvas/element/path-objects/2d.path.stroke.prune.arc.html
imported/w3c/web-platform-tests/html/canvas/element/path-objects/2d.path.stroke.prune.closed.html
imported/w3c/web-platform-tests/html/canvas/element/path-objects/2d.path.stroke.prune.curve.html
imported/w3c/web-platform-tests/html/canvas/element/path-objects/2d.path.stroke.prune.line.html

are going to fail with this patch. They are currently passing with Safari but failing for the other browsers. See

https://wpt.fyi/results/html/canvas/element/path-objects/2d.path.stroke.prune.arc.html?label=experimental&label=master&aligned
https://wpt.fyi/results/html/canvas/element/path-objects/2d.path.stroke.prune.closed.html?label=experimental&label=master&aligned
https://wpt.fyi/results/html/canvas/element/path-objects/2d.path.stroke.prune.curve.html?label=experimental&label=master&aligned
https://wpt.fyi/results/html/canvas/element/path-objects/2d.path.stroke.prune.rect.html?label=experimental&label=master&aligned

[Simon Fraser (smfr)]

Comment on attachment 429610 [details]
Patch

If the path has a non-opaque color, should we see all the points stack up? Do the other browsers do this? Maybe it should be a WPT test.

[Pierpaolo Follia]

Hi, is there any news on this one? Thanks.