<rdar://problem/122586395>

Created attachment 471399 [details] rendering in safari, firefox, chrome Test is failing in Safari, and passing in Firefox and Chrome.

From https://html.spec.whatwg.org/multipage/canvas.html#fill-rule The CanvasFillRule enumeration is used to select the fill rule algorithm by which to determine if a point is inside or outside a path. The value "nonzero" value indicates the nonzero winding rule, wherein a point is considered to be outside a shape if the number of times a half-infinite straight line drawn from that point crosses the shape's path going in one direction is equal to the number of times it crosses the path going in the other direction. The "evenodd" value indicates the even-odd rule, wherein a point is considered to be outside a shape if the number of times a half-infinite straight line drawn from that point crosses the shape's path is even. If a point is not outside a shape, it is inside the shape.

// Drawing a green rectangle with a width of 100 and a height of 50 ctx.fillStyle = '#0f0'; ctx.fillRect(0, 0, 100, 50); // start the path ctx.beginPath(); // set the color to red. ctx.fillStyle = '#f00'; // draw a square on the left side ctx.rect(0, 0, 50, 50); // draw a square on the right side ctx.rect(100, 50, -50, -50); // draw a rectangle on the top side ctx.rect(0, 25, 100, -25); // draw a rectangle on the bottom side ctx.rect(100, 25, -100, 25); // finish the path by filling ctx.fill(); The shape at the end is not closed at all. The paths defines cross inside the rectangle.