Canvas with semi-transparent backgrounds gets tranprenty removed in draw

p5.js Coding Questions
1

When I put my semi-transparent background, into the draw loop the transparency disappears after a few frames

function draw() {
  background(100, 100);
}

Minimal Reproducible Result

https://jsfiddle.net/Errorbot1122/ezg8wuxs/

2

Consider what color you would see if you had many tinted glass windows, all of the same color and transparency, and you piled them up into an ever deeper pile. Ultimately, you would no longer be able to discern whatever color table was underneath the pile, even if you had a light table at the bottom.

1 Like
3

You can fix this by calling clear() before background()

2 Likes
4

If you would like to observe the issue in action, try this:

function setup() {
  createCanvas(400, 100);
  textSize(24);
  textAlign(CENTER, CENTER);
  text("Can you read me?", width / 2, height / 2);
  frameRate(1);
}

function draw() {
  background(100, 16);
  print(frameCount);
}

The background color is piling up at one frame per second. Here we are at the 14th frame:

frame14
frame14612×579 39.7 KB

EDITED on October 21, 2021 to add a missing semicolon. :blush: