"WebGL clear fills with black pixels instead of transparent background" (cf. issue #2766)

[mkmori]

Nature of issue?

• Found a bug

Details about the bug:

• p5.js version: 0.8.0

• Web browser and version: FF Quantum 67.0.2 (64-bit); Chrome 74.0.3729.169 (64-bit)

• Operating System: Win10

• Steps to reproduce this bug:
  Same as issue #2766: WEBGL background renders black & opaque after clear()...except the workaround background(0,0) is no longer working, either.

Original issue, (was fixed in 0.6.0, 0.7.0, and 0.7.3, but is broken again in 0.8.0):

let pg;
function setup() {
  createCanvas(500, 500);
  background(0, 255, 255)
  pg = createGraphics(250, 500, WEBGL)
  pg.clear();
  image(pg, 0, 0);
}

Old workaround, (now also broken in 0.8.0):

let pg;
function setup() {
  createCanvas(500, 500);
  background(0, 255, 255)
  pg = createGraphics(250, 500, WEBGL)
  pg.background(0,0);
  image(pg, 0, 0);
}

[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.

[stalgiag]

I will look into this when I get a chance. Sorry for the confusion. Not sure why the graphics canvas isn't clearing completely.

[stalgiag]

Okay this is due to the fact that the WebGL rendering context has a default 'alpha' value of false. I don't see a significant reason why this shouldn't default to true. I will make the necessary changes along with adding a unit test to ensure that GL can clear correctly.

While investigating this, I realized that there is another problem that is somewhat related, in that setAttributes() isn't working with graphics objects.