New issue
Advanced search Search tips

Issue 614849 link

Starred by 2 users

Issue metadata

Status: WontFix
Owner: ----
Closed: May 2016
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug



Sign in to add a comment

HTML canvas drawImage does not have shadows when rotated

Reported by cori...@artofproblemsolving.com, May 25 2016

Issue description

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

Steps to reproduce the problem:
1. Create a canvas.
2. Set the shadowBlur and shadowColor.
3. Draw an image (which will have a shadow, as expected).
4. Rotate the canvas.
5. Draw an image (which will NOT have a shadow).

What is the expected behavior?
When you rotate the canvas and draw an image, it should have a shadow. This should match the behavior of all other browsers, which do have a shadow on images drawn after a rotation.

What went wrong?
There is no shadow on images drawn after rotation.

Did this work before? N/A 

Chrome version: 50.0.2661.86  Channel: n/a
OS Version: OS X 10.10.5
Flash Version: Shockwave Flash 21.0 r0

Here is a jsfiddle and code that can be used to demonstrate the bug:
https://jsfiddle.net/ayhLg8cs/1/

var canvas = document.getElementById("test_canvas");
var context = canvas.getContext("2d");
var testImage = new Image(50, 50);
testImage.src = "https://cdn1.iconfinder.com/data/icons/fs-icons-ubuntu-by-franksouza-/128/draw-rectangle.png";
var drawImageAndRectWithShadow = function() {
  context.shadowBlur = 20;
  context.shadowColor = "#FF0000";
  context.rect(60, 30, 30, 30);
  context.fill();
  context.drawImage(testImage, 10, 10, 50, 50);
};
drawImageAndRectWithShadow();
context.translate(100, 100);
context.rotate(130 * Math.PI / 180);
context.translate(-100, -100);
drawImageAndRectWithShadow();
 
shadow-bug-example.png
18.5 KB View Download
Components: -Blink Blink>Canvas
Status: WontFix (was: Unconfirmed)
This has been fixed already, please use canary here to verify:
https://www.google.com/chrome/browser/canary.html

Sign in to add a comment