Issue with color blending when there is alpha involved.

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.

alpha blending error