Issue with color blending when there is alpha involved.

[deshudiosh]

Most appropriate sub-area of p5.js?

• Accessibility (Web Accessibility)
• Build tools and processes
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Friendly error system
• Image
• IO (Input/Output)
• Localization
• Math
• Unit Testing
• Typography
• Utilities
• WebGL
• Other (specify if possible)

p5.js version

1.4.0

Web browser and version

Not browser specific

Operating System

Not os specific

Steps to reproduce this

There seams to be an issue with color blending when there is alpha involved.

Simple p5js illustrating a problem:
https://editor.p5js.org/dsh/sketches/JOxRTMlSr

Description:
We have a canvas background filled with a constant color.
When drawing circles with the same constant color but with changed alpha, onto a p5.Graphics instance, many times over and over, and than drawing that p5.Graphics onto a canvas using image(), the p5.Graphics "layer" has different shade than the background.

The lower the alpha, the bigger discoloration occurs.

Semi-transparent circles of the same color put on top of each other should eventually result in a fully opaque circle of that exact color.

Also, there are some visible artifacts on the edge of circles.

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[mkmori]

Yes, no matter how many times the shape is drawn, the achievable color seems dependent on the alpha value. Please find an even simpler example below. (Fyi, the effect is the same, but the sketch linked above references an earlier version of p5.js (0.10.2).)

function setup() {
  createCanvas(400, 400);
}

function draw() {
  noStroke();

  fill(0, 255);
  ellipse(200, 200, 111);

  fill(0, 2);
  ellipse(200, 200, 222);

  fill(0, 1);
  ellipse(200, 200, 333);
}

[mkmori]

Cf. #5179

[aferriss]

I think this is happening because of the anti-aliasing on the edge of your shape. The anti-aliased pixels are stacking up over time, since you are not clearing the background in any way. Try putting a call to clear() in the draw loop before you draw the image and see if the problem still remains.

[deshudiosh]

It's not about the edges, it's about the color in the middle of the circle. It's totally wrong.

[murilopolese]

Hey, @deshudiosh! I'm trying to learn more about colors and checking if I can help with this bug :)

I do not have any answers yet but I'd like to share a little bit of my exploration in the hopes it's going to be clear for someone more experient.

If I instead of drawing on the p5.Graphic object, draw straight into the canvas, I get the correct and expected result (still shows antialising artifacts):

function draw() {
  for (let i = 0; i < 1000; i++) {
    point(200, 200);
  }
}

The other thing I did was to generate a png file with transparent background with a transparent circle in the middle. I draw it many times on a p5.Graphics instance and then draw that using image(), the colors get all wrong too.

On further inspection I noticed something very suspicious:

1. I took the for (let i = 0; i < 1000; i++) out and do pg.point(200, 200). only once.
2. Inspecting the value of col.level it returns [140, 131, 114, 15]
3. If I inspect the color at the center of the p5.Graphics instance with pg.get(200, 200) it returns a different color [136, 136, 119, 15].

Could that be some sort of floating number precision or rounding problem?
Could that be something when calling pg.point(200, 200)?
I have no idea but I'll keep investigating! :B

[sypyyy]

@Qianqianye Hi there, I have done some digging to this issue. And I found that in HTML canvas, the result of blending changes due to the background color. And intuitively we would think the circle was directly drawn on the default canvas. But actually I have found that in this example, it was first drawn on the Graphics Object, which was a temporary canvas later on drawn to the default canvas. And the Graphic's background was not initialized to the same color as the circle. I think the best way to address this is to add a setBackground method to Graphics object so that the user can choose to initialize the background color of the temporary canvas. I have been working on the code base, if you approve of this idea, please consider assigning this issue to me. I look forward to making a contribution! Thanks!

[davepagurek]

Hey @sypyyy, would you mind elaborating on what you mean by a background color? Is that the same as calling e.g. background('#F00') after creating a graphic to make it red?

My take on the issue is this:

Semi-transparent circles of the same color put on top of each other should eventually result in a fully opaque circle of that exact color.

I don't think this is actually true in practice due to numerical precision issues from repeated rounding.

I suspect this might also have to do with the fact that canvases use integer colors with premultiplied alphas. When you color something 50% opacity red, instead of storing the colors internally as [255, 0, 0, 128], it's stored as [128, 0, 0, 128] (all the color channels are multiplied by the alpha.) This gets un-multiplied again when we read the pixel values, so it's hard to notice, but we lose color precision. The lower the opacity, the less color info we can actually store.

In 2D mode, I don't think this is a setting we are able to change, as it's part of the js canvas API. It could be that using a WebGL canvas with a p5.Framebuffer using floating point colors will be better at handling this issue though.

[sypyyy]

Hi @davepagurek, yes it just means painting the whole graphics canvas. I also agree that this is a problem stemming from the js canvas API. So we cannot fully solve it. And I am not entirely sure what was happening that causes this problem. But I found that if you first paint the canvas's background the same color without opacity, the problem will go away. So I thought it would be nice to add this method.