Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Subtle difference when drawing images with low global alpha #136

Open
lucasmerlin opened this issue Feb 25, 2023 · 1 comment
Open

Subtle difference when drawing images with low global alpha #136

lucasmerlin opened this issue Feb 25, 2023 · 1 comment

Comments

@lucasmerlin
Copy link
Contributor

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants