Bug 220057 - Shadow is not drawn as a group effect when drawing SVG into canvas
Summary: Shadow is not drawn as a group effect when drawing SVG into canvas
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Canvas (show other bugs)
Version: Safari 14
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-12-21 08:58 PST by Kyle
Modified: 2020-12-22 11:25 PST (History)
5 users (show)

See Also:

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 an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Kyle 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
Comment 1 Said Abou-Hallawa 2020-12-21 10:53:48 PST 
Can you please attach the test case itself instead of the screenshot?
Comment 2 Kyle 2020-12-22 09:51:16 PST 
Created attachment 416672 [details]
Testcase - draws SVG with shadow in HTML5 canvas
Comment 3 Kyle 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.
Comment 4 Smoley 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.
Comment 5 Radar WebKit Bug Importer 2020-12-22 11:14:37 PST 
<rdar://problem/72593744>