samizdatco / skia-canvas

A GPU-accelerated 2D graphics environment for Node.js
MIT License
1.67k stars 63 forks source link

Subtle difference when drawing images with low global alpha #136

Open lucasmerlin opened 1 year ago

lucasmerlin commented 1 year ago

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: image

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 2 months ago

I have noticed it too. It's as if the color is being blended with some black color.