HTML canvas drawImage does not have shadows when rotated
Reported by
cori...@artofproblemsolving.com,
May 25 2016
|
||
Issue descriptionUserAgent: 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();
,
May 27 2016
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 |
||
Comment 1 by dtapu...@chromium.org
, May 26 2016