New issue
Advanced search Search tips

Issue 901759 link

Starred by 1 user
Status: Fixed
Owner:
fs...@chromium.org
Closed: Nov 9
Cc:
fs...@chromium.org
phanindra.mandapaka@chromium.org
Components:
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 mor...@gmail.com, Nov 5 
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.
ShadowBug.png
118 KB View Download

Comment 1 by nzolghadr@chromium.org, Nov 5

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 jsbin.com or wherever you prefer).

Comment 3 by fs...@chromium.org, Nov 5

Cc: fs...@chromium.org
Labels: StarterBug
Status: Available (was: Unconfirmed)
thanks for the report.

Comment 4 by xiangze....@intel.com, Nov 9 

It appears that filters affect canvas matrix and the matrix is not restored after drawing shadows with filters.

Adding a c->save() in https://cs.chromium.org/chromium/src/third_party/blink/renderer/modules/canvas/canvas2d/base_rendering_context_2d.h?rcl=cca1ac2ce53e420cdc7ef2575a6ef91e29b7a99e&l=491 can fix this bug.
Project Member

Comment 5 by bugdroid1@chromium.org, Nov 9 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/d07d7323809b59b52b1237dacb94330cc9dab4bd

commit d07d7323809b59b52b1237dacb94330cc9dab4bd
Author: Fernando Serboncini <fserb@chromium.org>
Date: Fri Nov 09 16:11:28 2018

Save transform context for filters

Otherwise we get weird behavior on filters while transforming.

TBR=

Bug:  901759 
Change-Id: I1d487f500024a309bdb4002ba19a20387b3bb251
Reviewed-on: https://chromium-review.googlesource.com/c/1329342
Reviewed-by: Fernando Serboncini <fserb@chromium.org>
Commit-Queue: Fernando Serboncini <fserb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#606861}
[modify] https://crrev.com/d07d7323809b59b52b1237dacb94330cc9dab4bd/third_party/blink/renderer/modules/canvas/canvas2d/base_rendering_context_2d.h

Comment 6 by fs...@chromium.org, Nov 9

Owner: fs...@chromium.org
Status: Fixed (was: Available)

Comment 7 by phanindra.mandapaka@chromium.org, Nov 12

Cc: phanindra.mandapaka@chromium.org
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

Thanks.!
901759.mp4
3.1 MB View Download
►

Sign in to add a comment