# WEBGL Color Alpha Bug?

**URL:** <https://discourse.processing.org/t/webgl-color-alpha-bug/25080>\
**Category:** p5.js\
**Created:** [October 31, 2020, 6:29pm UTC](https://discourse.processing.org/t/webgl-color-alpha-bug/25080 "2020-10-31T18:29:50Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![stungeye](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stungeye/32/10970_2.png) [@stungeye](https://discourse.processing.org/u/stungeye)\
**Post date:** [October 31, 2020, 6:29pm UTC](https://discourse.processing.org/t/webgl-color-alpha-bug/25080/1 "2020-10-31T18:29:50Z")

</div>

Same sketch. P5js version on the left and Java Processing version on the right.

![screen](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/bd38c2f85f929d405854d57fbbffaf266f7469bf.jpeg)

Why the color difference for:

```auto
color(255, 0, 0, alpha); // alpha: 0 to 200

```

p5js is rendering as WEBGL. Java p5 is rendering as P3D.

Do they treat the fill color alpha channel differently? Are the lighting defaults different? Or is this a bug with p5js WEBGL?

I’ve tried forcing lighting to defaults by adding `lights()` in the draw loop of both sketches. After doing so Java p5 output remains the same but p5js color looks even more dull.

---

<div class="post-metadata">

**Author:** ![stungeye](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stungeye/32/10970_2.png) [@stungeye](https://discourse.processing.org/u/stungeye)\
**Post date:** [October 31, 2020, 6:34pm UTC](https://discourse.processing.org/t/webgl-color-alpha-bug/25080/2 "2020-10-31T18:34:27Z")

</div>

When I use similar code within a 2D context p5js and Java p5 output looks identical:

 ![colors](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/49d6e2a9e1fc9bf00718fe82a824a44a9bdfc930.jpeg)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 1, 2020, 4:46pm UTC](https://discourse.processing.org/t/webgl-color-alpha-bug/25080/3 "2020-11-01T16:46:30Z")

</div>

> <https://github.com/processing/p5.js/issues/4881>
>
> 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
> ...

---

<div class="post-metadata">

**Author:** ![stungeye](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stungeye/32/10970_2.png) [@stungeye](https://discourse.processing.org/u/stungeye)\
**Post date:** [November 1, 2020, 6:05pm UTC](https://discourse.processing.org/t/webgl-color-alpha-bug/25080/4 "2020-11-01T18:05:36Z")

</div>

Yes, I filed this issue this morning as I believe the behaviour I’m describing here is a bug in the p5js WEBGL renderer. I’ll write back to this thread to describe how the issue is resolved.

---

<div class="post-metadata">

**Author:** ![stungeye](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stungeye/32/10970_2.png) [@stungeye](https://discourse.processing.org/u/stungeye)\
**Post date:** [November 11, 2020, 4:21pm UTC](https://discourse.processing.org/t/webgl-color-alpha-bug/25080/5 "2020-11-11T16:21:28Z")

</div>

Explanation of this behaviour and a fix from [the p5js issue I filed about this](https://github.com/processing/p5.js/issues/4881):

> This is due to the fact that with WebGL the canvas itself is on top of another element (the document). We have experimented with different default behavior and this gets reported as a bug whenever we switch it. The problem is that some amount of blending with the background document is expected to be possible.
> 
> Long story short, you can get the same colors as Processing by adding `setAttributes('alpha', false)` to your sketch.
> 
> The question always becomes which person should have to set this attribute, the person hoping to blend or the person that is expecting specific colors when migrating from Processing.

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [November 11, 2020, 4:46pm UTC](https://discourse.processing.org/t/webgl-color-alpha-bug/25080/6 "2020-11-11T16:46:16Z")

</div>

Well, alpha behaviour in Java Processing with GL is completely borked too! 😉