Automattic / node-canvas

Node canvas is a Cairo backed Canvas implementation for NodeJS.
10.2k stars 1.17k forks source link

`drawImage` doesn't render properly when the context has both a scale and a shadow #1522

Open etiennesegonzac opened 4 years ago

etiennesegonzac commented 4 years ago

Issue

drawImage doesn't render properly when the context has both a scale and a shadow The shadow itself is not scaled properly.

Bisecting points to: https://github.com/Automattic/node-canvas/pull/1243/files

Steps to Reproduce

var Canvas = require('canvas');

// Draw an image.
var image = Canvas.createCanvas();
image.width = image.height = 200;
var ctx = image.getContext('2d');
ctx.fillRect(20, 20, 160, 160);

// Use this image in a *scaled* context with a shadow.
var scaled = Canvas.createCanvas();
scaled.width = scaled.height = 400;
ctx = scaled.getContext('2d');
ctx.scale(2, 2);
ctx.translate(50, 50);
ctx.shadowColor = "red";
ctx.shadowOffsetY = 2;
ctx.drawImage(image, 0, 0, image.width / 2, image.height / 2);

console.log(scaled.toDataURL());

Your Environment

Result with canvas@2.4.1

2 4 1

Result starting canvas@2.5.0

2 5 0

(Tested on macOS)

asturur commented 4 years ago

i should try to fix this.