# Canvas with semi-transparent backgrounds gets tranprenty removed in draw

**URL:** https://discourse.processing.org/t/canvas-with-semi-transparent-backgrounds-gets-tranprenty-removed-in-draw/32974
**Category:** Coding Questions
**Created:** [October 21, 2021, 3:58am UTC](https://discourse.processing.org/t/canvas-with-semi-transparent-backgrounds-gets-tranprenty-removed-in-draw/32974 "2021-10-21T03:58:07Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Errorbot1122](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/errorbot1122/32/14718_2.png) [@Errorbot1122](https://discourse.processing.org/u/Errorbot1122)
#### Post date: [October 21, 2021, 3:58am UTC](https://discourse.processing.org/t/canvas-with-semi-transparent-backgrounds-gets-tranprenty-removed-in-draw/32974/1 "2021-10-21T03:58:07Z")

</div>

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

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

```

## Minimal Reproducible Result

> **[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/ezg8wuxs/)**
>
> JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

---

<div class="post-metadata">

### Author: ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)
#### Post date: [October 21, 2021, 5:01am UTC](https://discourse.processing.org/t/canvas-with-semi-transparent-backgrounds-gets-tranprenty-removed-in-draw/32974/2 "2021-10-21T05:01:28Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)
#### Post date: [October 21, 2021, 9:36am UTC](https://discourse.processing.org/t/canvas-with-semi-transparent-backgrounds-gets-tranprenty-removed-in-draw/32974/3 "2021-10-21T09:36:48Z")

</div>

You can fix this by calling [`clear()`](https://p5js.org/reference/#/p5/clear) before `background()`

---

<div class="post-metadata">

### Author: ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)
#### Post date: [October 21, 2021, 10:14am UTC](https://discourse.processing.org/t/canvas-with-semi-transparent-backgrounds-gets-tranprenty-removed-in-draw/32974/4 "2021-10-21T10:14:46Z")

</div>

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

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c2ad71b7d5cfe8fb539ce8b41a6c1c7d6b227175.png)

_EDITED on October 21, 2021 to add a missing semicolon. 😊_
