[BUG]On Microsoft Edge paths disconnect stroke from fill if stroke width is more than 15

[hobbsythe6th]

Describe the bug
If you make a new ellipse with stroke width > 16, the path results in the ellipses shown in the below screenshots. Console logs nothing at all. You cannot use a rectangle to reproduce the bug unless you use the path cursor.
You might want to play around with the reproduction instructions a bit, since there's a bunch of different ways to reproduce this bug that I know of (and there's probably more).

To reproduce
One set of steps to reproduce the behavior:

1. Set stroke width to 16 or more
2. Try and make an ellipse
3. You will see that the resulting path is as shown in the screenshot (the paths that are normal have strokes of less than 16)
   You can also reproduce by creating a normal, bug-free circular path and setting the stroke width to a sufficiently large number depending on the size of the path.
   Yet another way to reproduce is to take any path with four or less points, make up to three of the points curved (with the path cursor), and reduce the size for a bit.

Expected behavior
The paths render with connected strokes and fills.

Screenshots

^{the rectangle actually resulted from the ellipse tool making a very small oval}

Editor version
1.19.3 onwards

Device

• Lenovo AIO Desktop
• Windows 11
• Microsoft Edge

Suggested fixes
I think this is either coming from the stroke width handlers or a paperjs quirk.

Additional context
Weirdly, this seems to be an Edge thing. I tried reproducing on Chrome but it didn't do anything weird.

[BaronAWC]

My guess would be that it's indeed an Edge thing. Does anything up show up in the console by chance?

(unable to reproduce on Arc for Mac)

[hobbsythe6th]

nothing in console sadly

[InternetAstronaut]

I believe it's a problem with Edge's implementation of the Canvas API. We can't fix a Microsoft issue.

[BaronAWC]

I was unable to reproduce on any browser for Mac, but StickmanRed was able to reproduce on Chrome with larger outline sizes.

He made this code snippet to try out, open an about:blank window and paste this in the console.

let canvas = document.createElement('canvas');
canvas.width = 400; canvas.height = 300
document.body.append(canvas);
let ctx = canvas.getContext('2d')
ctx.strokeStyle = 'red';
ctx.lineWidth = 100;
ctx.beginPath()
ctx.moveTo(200,100);
ctx.bezierCurveTo(200,100,210,120,220,120);
ctx.bezierCurveTo(230,120,240,100,240,100);
ctx.closePath();
ctx.stroke()

If you get a solid shape, Paper is working as expected, and if not, that would indicate the browser or Paper is doing something funny.

[InternetAstronaut]

We should try seeing if changing to Scratch's Paper.js removes this behavior.