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.
<rdar://problem/78388953>
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?
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.
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.
Created attachment 429610 [details] Patch
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
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.
Hi, is there any news on this one? Thanks.