# Need help making background transparent

**URL:** <https://discourse.processing.org/t/need-help-making-background-transparent/25700>\
**Category:** Coding Questions\
**Created:** [November 25, 2020, 3:22pm UTC](https://discourse.processing.org/t/need-help-making-background-transparent/25700 "2020-11-25T15:22:24Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sijht](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sijht/32/11196_2.png) [@Sijht](https://discourse.processing.org/u/Sijht)\
**Post date:** [November 25, 2020, 3:22pm UTC](https://discourse.processing.org/t/need-help-making-background-transparent/25700/1 "2020-11-25T15:22:25Z")

</div>

I tried a lot of methods i saw, but none of them seem to work.  
I am trying to take an image, save it and when I paste it into my canvas turn the white pixels into transparent.

here is some code that I have written so far(based on another forum post):  
int q;  
int c;  
int x;  
int y;  
int i;  
PImage save;  
PImage newImg;  
void setup() {  
fullScreen();  
background(255);

color c = get(25, 25);  
fill©;  
noStroke();  
save = loadImage(“partialSave.png”);  
}  
void draw() {  
fill(0);  
rect(0, q, width, 50);  
q = q + 50;  
if ( c \>= 255) {  
c = 0;  
} else {  
c = c + 30;  
}  
fill(255);  
rect(0, 0, 50, height);  
rect(0, 0, width, 50);  
rect(width-50, 0, 50, height);  
rect(0, height-50, width, 50);  
}  
void mousePressed() {  
save(“partialSave.png”);  
}

void keyPressed() {  
if (keyPressed && key == ‘s’) {  
image(save, mouseX, mouseY, 100, 100);  
loadPixels();  
for (int i = 0; i \< width\*height; i++) {  
if (pixels[i] == 0x000000) { // If it is red  
pixels[i] = 0xff00ff00; // Make it green  
}  
}  
updatePixels();  
}  
reset();  
}

void reset() {  
save = loadImage(“partialSave.png”);  
}

I hope someone has some tips to help me on my way.

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 25, 2020, 3:54pm UTC](https://discourse.processing.org/t/need-help-making-background-transparent/25700/2 "2020-11-25T15:54:47Z")

</div>

> [@Sijht](#):
>
> canvas

The sketch canvas cannot be transparent it is always opaque.  
You can make a PGraphics or PImage layer that can be saved with transparency.  
Further there is a weird flow in your code, first animating a rectangle, but then overdrawing it.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [November 25, 2020, 4:51pm UTC](https://discourse.processing.org/t/need-help-making-background-transparent/25700/3 "2020-11-25T16:51:49Z")

</div>

Hello,

Please format your code:  
[https://discourse.processing.org/faq#format-your-code](https://discourse.processing.org/faq#format-your-code)

I did not look over your code; try to cut and paste it into a new sketch and you will understand why.

I was able to:

- load an image (frog1.png)
- replace pixels over a certain brightness with a transparent one.  
[brightness() / Reference / Processing.org](https://processing.org/reference/brightness_.html)
- save image into an ARGB PImage (frog2.png)  
[createImage() / Reference / Processing.org](https://processing.org/reference/createImage_.html) \< Look at examples here.

```auto
  frog1 = loadImage("frog1.png");
  frog2 = createImage(frog1.width, frog1.height, ARGB); //ARGB :)

```

Worked.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/dab492956995f911b7c1a99c5be7240afbb67718.jpeg)

Additional resources:  
[Processing Images and Pixels Tutorial](https://processing.org/tutorials/pixels/)  
[10.5: Image Processing with Pixels - Processing Tutorial](https://www.youtube.com/watch?v=j-ZLDEnhT3Q)

`:)`