New issue
Advanced search Search tips

Issue 901759 link

Starred by 1 user

Issue metadata

Status: Fixed
Closed: Nov 9
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug

Sign in to add a comment

Canvas shadows are transformed separately from it's shape when blur filter applied

Reported by, Nov 5

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3602.0 Safari/537.36

Steps to reproduce the problem:
1. Setup JS canvas
2. Set blur filter: ctx.filter = "blur(1px)"
3. Set rotation: ctx.rotate(0.1)
4. Set any visible shadow color: ctx.shadowColor = 'rgba(0,0,0,0.5)';
4. Set shadow offset: ctx.shadowOffsetX = 5; ctx.shadowOffsetY = 5
5. Use fillRect to draw an rectangle: ctx.fillRect(50,50,100,100);

What is the expected behavior?
Shadow should be aligned in the same way with or without blur filter applied.

What went wrong?
Shadow is not aligned with it's shape.

Did this work before? No 

Chrome version: 72.0.3602.0  Channel: canary
OS Version: OS X 10.14.1
Flash Version: 

It works well in Firefox.
118 KB View Download
Components: -Blink Blink>Canvas
Reporter that would be really helpful if you can also attach your html/js file here or just have it online somewhere (like or wherever you prefer).
Labels: StarterBug
Status: Available (was: Unconfirmed)
thanks for the report.
It appears that filters affect canvas matrix and the matrix is not restored after drawing shadows with filters.

Adding a c->save() in can fix this bug.

Project Member

Comment 5 by, Nov 9

The following revision refers to this bug:

commit d07d7323809b59b52b1237dacb94330cc9dab4bd
Author: Fernando Serboncini <>
Date: Fri Nov 09 16:11:28 2018

Save transform context for filters

Otherwise we get weird behavior on filters while transforming.


Bug:  901759 
Change-Id: I1d487f500024a309bdb4002ba19a20387b3bb251
Reviewed-by: Fernando Serboncini <>
Commit-Queue: Fernando Serboncini <>
Cr-Commit-Position: refs/heads/master@{#606861}

Status: Fixed (was: Available)
Labels: TE-Verified-M72 TE-Verified-72.0.3608.0
Able to reproduce the issue on chrome version 72.0.3602.0 (build without fix) as per the comment #0.
Verified the fix on Mac 10.14.0 using Chrome version # 72.0.3608.0
Attaching screencast for reference.
Observed that " Shadow is aligned with its shape " 
The fix is working as expected, adding Verified labels

3.1 MB View Download

Sign in to add a comment