Simple repro that works fine in other browsers: <html> <body style="display: flex;"> <canvas id="canvas1" style="flex: 1; width: 100%; height: 100%; background: #eee" /> </body> <script> const canvas = document.getElementById("canvas1"); const ctx = canvas.getContext("2d"); ctx.canvas.width = 800; ctx.canvas.height = 600; ctx.transform(1, 0.27, 0, 1, 0, -95.26); ctx.textAlign = "center"; ctx.textBaseline = "top"; ctx.lineWidth = 1; ctx.font = "22px Arial"; ctx.beginPath(); ctx.rect(200, 200, 400, 29); ctx.closePath(); ctx.fillStyle = "#FFE0C0"; ctx.fill("nonzero"); ctx.clip("nonzero"); ctx.fillStyle = "#000"; ctx.fillText("Text that doesn't display in Safari", 400, 205); </script> </html>
<rdar://problem/54420498>
Created attachment 459942 [details] Safari 15.5 matches other browsers I created a JSFiddle using attached test case from Comment 01 and tested it in Safari 15.5 on macOS 12.4 and it matches with other browser as shown from the attached screenshot. I was not able to replace any bug, which was previously happening and since it is aligned with other browsers, this should be marked as "RESOLVED CONFIGURATION CHANGE". Thanks!
JS Fiddle for testing - https://jsfiddle.net/8e4hx6qw/
Thank you for testing.