Bug 220057

Summary: Shadow is not drawn as a group effect when drawing SVG into canvas
Product: WebKit Reporter: Kyle <kyleburton360>
Component: CanvasAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: dino, sabouhallawa, simon.fraser, smoley, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 14   
Hardware: All   
OS: All   
Attachments:
Description Flags
SVG with shadow on Safari
none
Testcase - draws SVG with shadow in HTML5 canvas none

Kyle
Reported 2020-12-21 08:58:37 PST
Created attachment 416605 [details] SVG with shadow on Safari Drawing SVGs onto the HTML5 canvas with shadows results in each individual shape within an SVG getting its own shadow, which creates a sort of layering effect. Also, the shadows are cropped to fit within the SVG's bounds. Here is how it should look (Chrome): https://i.stack.imgur.com/IrCwP.png and here is how Safari renders it: https://i.stack.imgur.com/gbIB3.png
Attachments
SVG with shadow on Safari (32.16 KB, image/png)
2020-12-21 08:58 PST, Kyle 		no flags
Details
Testcase - draws SVG with shadow in HTML5 canvas (511 bytes, text/html)
2020-12-22 09:51 PST, Kyle 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Said Abou-Hallawa
Comment 1 2020-12-21 10:53:48 PST
Can you please attach the test case itself instead of the screenshot?
Kyle
Comment 2 2020-12-22 09:51:16 PST
Created attachment 416672 [details] Testcase - draws SVG with shadow in HTML5 canvas
Kyle
Comment 3 2020-12-22 09:51:49 PST
(In reply to Said Abou-Hallawa from comment #1) > Can you please attach the test case itself instead of the screenshot? Just added! Hope that helps.
Smoley
Comment 4 2020-12-22 11:14:27 PST
Thanks for filing, I can reproduce this on Safari 13.1.3 as well as STP 117 (14.1). Does not reproduce in Firefox or Chrome.
Radar WebKit Bug Importer
Comment 5 2020-12-22 11:14:37 PST
<rdar://problem/72593744>
Note You need to log in before you can comment on or make changes to this bug.