Transparency looks different in WEBGL/non WEBGL

[hamoid]

Nature of issue?

• Found a bug

Most appropriate sub-area of p5.js?

• Color
• Core/Environment/Rendering
• WebGL

Which platform were you using when you encountered this?

• Desktop/Laptop

Details about the bug:

• p5.js version: I couldn't find out. The one today at https://editor.p5js.org/
• Web browser and version: Firefox 63.0.3
• Operating System: ArchLinux
• Steps to reproduce this:

function drawOnto(P, x, y, bg) {
  P.background(bg)
  P.noStroke();
  P.fill("rgba(250, 64, 24, 0.5)")
  P.ellipse(x, y, 100, 100);
}
new p5(function(P) {
  P.setup = function() {
    P.createCanvas(200, 100, P.WEBGL);
    drawOnto(P, 0, 50, 0);
  };
});
new p5(function(P) {
  P.setup = function() {
    P.createCanvas(200, 100);
    drawOnto(P, 100, 0, 0);
  };
});
new p5(function(P) {
  P.setup = function() {
    P.createCanvas(200, 100, P.WEBGL);
    drawOnto(P, 0, 50, 255);
  };
});
new p5(function(P) {
  P.setup = function() {
    P.createCanvas(200, 100);
    drawOnto(P, 100, 0, 255);
  };
});

Both halfs of the circles should be equal. Half is rendered with WEBGL, half not.

This is the original color: rgba(250, 64, 24, 0.5)
These are the resulting colors:

Background  WebGL                 Non-WebGL
Black       rgb(157, 87, 72)      rgb(125, 32, 12)
White       rgb(252, 183, 168)    rgb(252, 159, 139)

It seems like Non WebGL does a linear interpolation, and WebGL does something else.

[stalgiag]

Thanks for the issue @hamoid!

You can fix this by calling setAttributes('alpha', false) on the WebGL canvases. The todo here might be to set 'alpha' to true by default. With 'alpha' set to false you won't be able to have transparency on the backbuffer but this seems like a rare use case, and those users can call setAttributes.

I can fix this in #3552 since I am already changing how setAttributes sets defaults.

[stalgiag]

fixed via #3552