Bug 220057

Summary:

Shadow is not drawn as a group effect when drawing SVG into canvas

Product:

WebKit

Reporter:

Kyle <kyleburton360>

Component:

Canvas

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

dino, sabouhallawa, simon.fraser, smoley, webkit-bug-importer

Priority:

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

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>