245420 2022-09-20 04:07:30 -0700 Safari 16 fails to correctly apply strokeStyle to canvas paths 2022-09-20 18:36:49 -0700 1 1 1 Unclassified WebKit Canvas Safari Technology Preview All iOS 16 RESOLVED DUPLICATE 245145 P2 Major --- 1 paul.neave webkit-unassigned dino oldest_to_newest 1899769 0 462469 paul.neave 2022-09-20 04:07:30 -0700 Created attachment 462469 Demo HTML/JS Major bug in Safari 16 (iOS and macOS) when drawing paths with strokeStyle in 2D canvas. The demo code below draws three small lines. One red, one blue, and the last one red. In Safari 16, the third line is incorrectly colored blue. ``` <html> <body> <canvas id="canvas"></canvas> <script> const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); context.lineWidth = 6; context.beginPath(); context.strokeStyle = 'red'; context.moveTo(30, 50); context.lineTo(50, 50); context.stroke(); context.beginPath(); context.strokeStyle = 'blue'; context.moveTo(60, 50); context.lineTo(80, 50); context.stroke(); context.beginPath(); context.strokeStyle = 'red'; context.moveTo(90, 50); context.lineTo(110, 50); context.stroke(); </script> </body> </html> ``` In all other browsers, including previous versions of Safari, the strokeStyle color is adhered to on a third call. In Safari 16, it does not update the color and it stays on the previous color. 1899989 1 ap 2022-09-20 18:36:49 -0700 *** This bug has been marked as a duplicate of bug 245145 *** 462469 2022-09-20 04:07:30 -0700 2022-09-20 04:07:30 -0700 Demo HTML/JS safari-canvas-strokestyle-bug.html text/html 555 paul.neave PGh0bWw+Cjxib2R5PgoJPGNhbnZhcyBpZD0iY2FudmFzIj48L2NhbnZhcz4KCTxzY3JpcHQ+Cgpj b25zdCBjYW52YXMgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnY2FudmFzJyk7CmNvbnN0IGNv bnRleHQgPSBjYW52YXMuZ2V0Q29udGV4dCgnMmQnKTsKCmNvbnRleHQubGluZVdpZHRoID0gNjsK Cgpjb250ZXh0LmJlZ2luUGF0aCgpOwpjb250ZXh0LnN0cm9rZVN0eWxlID0gJ3JlZCc7CmNvbnRl eHQubW92ZVRvKDMwLCA1MCk7CmNvbnRleHQubGluZVRvKDUwLCA1MCk7CmNvbnRleHQuc3Ryb2tl KCk7CgoKY29udGV4dC5iZWdpblBhdGgoKTsKY29udGV4dC5zdHJva2VTdHlsZSA9ICdibHVlJzsK Y29udGV4dC5tb3ZlVG8oNjAsIDUwKTsKY29udGV4dC5saW5lVG8oODAsIDUwKTsKY29udGV4dC5z dHJva2UoKTsKCgpjb250ZXh0LmJlZ2luUGF0aCgpOwpjb250ZXh0LnN0cm9rZVN0eWxlID0gJ3Jl ZCc7CmNvbnRleHQubW92ZVRvKDkwLCA1MCk7CmNvbnRleHQubGluZVRvKDExMCwgNTApOwpjb250 ZXh0LnN0cm9rZSgpOwoKCgk8L3NjcmlwdD4KPC9ib2R5Pgo8L2h0bWw+