Subtle difference when drawing images with low global alpha
lucasmerlin opened this issue · 1 comments
lucasmerlin commented
Drawing a image repeatedly with low globalAlpha values causes a significant difference in the outcome. I added a testcase to the visual tests to show this:
tests["low opacity img"] = function (ctx) {
let canvas = ctx.canvas.constructor;
let c;
if (typeof window !== 'undefined') {
c = document.createElement('canvas');
c.width = 200;
c.height = 200;
} else {
c = new canvas(200, 200);
}
let ctx2 = c.getContext('2d');
ctx2.fillStyle = "rgba(0, 0, 0, 0.5)";
ctx2.fillRect(0, 0, 200, 200);
ctx.globalAlpha = 0.01;
for (var i = 0; i < 50; i++) {
ctx.drawImage(c, 0, 0)
}
}
tests["low opacity drawRect"] = function (ctx) {
ctx.globalAlpha = 0.01 ;
for (var i = 0; i < 50; i++) {
ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
ctx.fillRect(0, 0, 200, 200);
}
}
I know this is a very subtle difference, but a very annoying one since our users often draw with low opacity, causing slight changes in the resulting images.
vincaslt commented
I have noticed it too. It's as if the color is being blended with some black color.