# Transparency in save() function

**URL:** <https://discourse.processing.org/t/transparency-in-save-function/25699>\
**Category:** Coding Questions\
**Created:** [November 25, 2020, 3:20pm UTC](https://discourse.processing.org/t/transparency-in-save-function/25699 "2020-11-25T15:20:34Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![yanze03](https://avatars.discourse-cdn.com/v4/letter/y/e9a140/32.png) [@yanze03](https://discourse.processing.org/u/yanze03)\
**Post date:** [November 25, 2020, 3:20pm UTC](https://discourse.processing.org/t/transparency-in-save-function/25699/1 "2020-11-25T15:20:34Z")

</div>

So I made this code where you can draw and create an image. This works just fine but is it possible to get an image with a transparant background? Is there like a function to remove everything with RGB code white in a certain area?

Code:

```auto
float oldX;
float oldY;
PImage test;
void setup(){
  fullScreen();
  background(255);
  rect(40, 150, 200 ,100);
  test = loadImage("test.jpg");
}
void draw(){
 if(mousePressed){
   line(mouseX, mouseY, oldX, oldY);
 }
 oldX = mouseX;
 oldY = mouseY;
 
 if(keyPressed && key == 's'){
  test = get(40, 150, 200, 100);
  test.save("test.jpg");
 }
 if(keyPressed && key == 'i'){
   background(0);
   image(test, width/2,height/2);
 }
}

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [November 25, 2020, 4:03pm UTC](https://discourse.processing.org/t/transparency-in-save-function/25699/2 "2020-11-25T16:03:37Z")

</div>

Hi,

Yes you need to use [`PGraphics`](https://processing.org/reference/PGraphics.html) to draw your stroke on a separate “buffer” then save it.

So you would only draw the stroke on that buffer and the background on the main canvas because you want transparency.

Since you are talking about transparency, you don’t want to save a .jpg image because it doesn’t support alpha but rather in [.png](https://en.wikipedia.org/wiki/Portable_Network_Graphics).

---

<div class="post-metadata">

**Author:** ![yanze03](https://avatars.discourse-cdn.com/v4/letter/y/e9a140/32.png) [@yanze03](https://discourse.processing.org/u/yanze03)\
**Post date:** [November 25, 2020, 4:41pm UTC](https://discourse.processing.org/t/transparency-in-save-function/25699/3 "2020-11-25T16:41:03Z")

</div>

I read the information on the processing website and after begindraw() they made a background. Are you supposed to make one and remove it later or later or can you draw without that background? How does this function make it transparant?

---

<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, 7:17pm UTC](https://discourse.processing.org/t/transparency-in-save-function/25699/4 "2020-11-25T19:17:25Z")

</div>

The PGraphics is transparent in itself.  
You just write in draw():

pg.beginDraw();  
pg.line(mouseX, mouseY, oldX, oldY);  
pg.endDraw();

then you save with pg.save(…);  
An eventual background on the canvas will not be saved.  
Only if you draw it on the PGraphics with pg.background(…);

---

<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, 8:44pm UTC](https://discourse.processing.org/t/transparency-in-save-function/25699/5 "2020-11-25T20:44:00Z")

</div>

Hello,

> [@yanze03](#):
>
> Are you supposed to make one and remove it later or later or can you draw without that background? How does this function make it transparent?

_[createGraphics() / Reference / Processing.org](https://processing.org/reference/createGraphics_.html)_ \< See the description for discussion of transparency

_[PGraphics / Reference / Processing.org](https://processing.org/reference/PGraphics.html)_ \< Try it with and without a background and also with alpha different values.

_[background() / Reference / Processing.org](https://processing.org/reference/background_.html)_

```auto
background(v1, v2, v3, alpha) 

```

Another hint:  
_[pmouseX / Reference / Processing.org](https://processing.org/reference/pmouseX.html)_

_ **UPDATE** _ Modified pg.background() to be semi-transparent.

Example from references with some tweaks:

```auto
PGraphics pg;

void setup() 
  {
  size(100, 100);
  pg = createGraphics(40, 40);
  }

void draw() 
  {
  background(0, 255, 0);
  
  pg.beginDraw();
  pg.background(255, 128, 0, 64); // Semi-transparent background
  pg.stroke(0);
  pg.line(20, 20, mouseX, mouseY);
  pg.endDraw();
  image(pg, 9, 30); 
  image(pg, 51, 30);
  }

```

I encourage you to [tinker](https://www.merriam-webster.com/dictionary/tinker) with the examples. Much to learn there is.

`:)`

---

<div class="post-metadata">

**Author:** ![yanze03](https://avatars.discourse-cdn.com/v4/letter/y/e9a140/32.png) [@yanze03](https://discourse.processing.org/u/yanze03)\
**Post date:** [November 26, 2020, 4:03pm UTC](https://discourse.processing.org/t/transparency-in-save-function/25699/6 "2020-11-26T16:03:24Z")

</div>

Thanks for the reply the background is indeed transparent. But my code broke… I can’t make a drawing and I can’t figer out why it isn’t working.

```auto
float oldX;
float oldY;
PImage test;
PGraphics pg;
void setup(){
  fullScreen();
  background(255);
  rect(40, 150, 200 ,100);
  test = loadImage("test.png");
  pg = createGraphics(200,100);
}
void draw(){
 if(mousePressed){
   pg.beginDraw();
   pg.background(0,0,0,0);
   pg.stroke(255);
   pg.line(mouseX, mouseY, oldX, oldY);
   pg.endDraw();
   pg.image(pg, 40,150);
}
 oldX = mouseX;
 oldY = mouseY;
 
 if(keyPressed && key == 's'){
  pg.get(40, 150, 200, 100);
  pg.save("test.png");
 }
 if(keyPressed && key == 'i'){
   background(100,100 ,0);
   image(test, width/2,height/2);
 }
}

```

---

<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 26, 2020, 5:56pm UTC](https://discourse.processing.org/t/transparency-in-save-function/25699/7 "2020-11-26T17:56:55Z")

</div>

Hello,

Your stroke is white and your background is white.

Try this:

`image(pg, 40,150);`

`:)`

---

<div class="post-metadata">

**Author:** ![yanze03](https://avatars.discourse-cdn.com/v4/letter/y/e9a140/32.png) [@yanze03](https://discourse.processing.org/u/yanze03)\
**Post date:** [November 26, 2020, 6:10pm UTC](https://discourse.processing.org/t/transparency-in-save-function/25699/8 "2020-11-26T18:10:44Z")

</div>

But if my stroke is white and I press “s” and “i” in my program, which changes the background color, than I would see the white drawing… But I dont see it…

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [November 26, 2020, 6:31pm UTC](https://discourse.processing.org/t/transparency-in-save-function/25699/9 "2020-11-26T18:31:29Z")

</div>

Hi,

> [@yanze03](#):
>
> ```auto
> pg.beginDraw();
> pg.background(0,0,0,0);
> pg.stroke(255);
> pg.line(mouseX, mouseY, oldX, oldY);
> pg.endDraw();
> pg.image(pg, 40,150);
> 
> ```

If you want to draw in the `PGraphics` buffer, you need to place all the drawing operations between `pg.beginDraw()` and `pg.endDraw()`.

Here you are drawing `pg` inside `pg` itself which makes no sense, you need to draw `pg` outside in the `draw()` function.

---

<div class="post-metadata">

**Author:** ![yanze03](https://avatars.discourse-cdn.com/v4/letter/y/e9a140/32.png) [@yanze03](https://discourse.processing.org/u/yanze03)\
**Post date:** [November 26, 2020, 6:55pm UTC](https://discourse.processing.org/t/transparency-in-save-function/25699/10 "2020-11-26T18:55:16Z")

</div>

“Place all the drawing operations between `pg.beginDraw()` and `pg.endDraw()` .”

“you need to draw `pg` outside in the `draw()` function.”

What do you mean?

Should it be like this:

```auto
void draw(){
   pg.beginDraw();
   pg.background(0,0,0,0);
   pg.stroke(255);
   pg.endDraw();
   pg.image(pg, 40,150);
 if(mousePressed){
   Pg.line(mouseX,mouseY,oldX,oldY);
}

```

---

<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 27, 2020, 1:19am UTC](https://discourse.processing.org/t/transparency-in-save-function/25699/11 "2020-11-27T01:19:01Z")

</div>

Try this:

```auto
   test = loadImage("test.png");
   image(test, 40, 0);

```

`:)`

---

<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 27, 2020, 10:30am UTC](https://discourse.processing.org/t/transparency-in-save-function/25699/12 "2020-11-27T10:30:05Z")

</div>

> [@yanze03](#):
>
> ```auto
> if(mousePressed){
> Pg.line(mouseX,mouseY,oldX,oldY);
> 
> ```

Read and try examples in the references again; you are straying from the examples and suggestions.

Updated example from the references:

```auto
PGraphics pg;

void setup() 
  {
  size(100, 100);
  pg = createGraphics(40, 40);
  }

void draw() 
  {
  background(0);
  pg.beginDraw();
  pg.background(128, 64); //Semi-transparent
  pg.stroke(255);
  pg.line(20, 20, mouseX, mouseY);
  pg.endDraw();
  image(pg, 9, 30); 
  image(pg, 51, 30);
  }
  
void keyPressed()
  {
  pg.save("test.png");
  }
  

```

I had the sketch window open to view the saved file:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/633623e30edd7cbcd85ba25cadfe7f4092eed31b.png)

`:)`

---

<div class="post-metadata">

**Author:** ![yanze03](https://avatars.discourse-cdn.com/v4/letter/y/e9a140/32.png) [@yanze03](https://discourse.processing.org/u/yanze03)\
**Post date:** [November 27, 2020, 4:24pm UTC](https://discourse.processing.org/t/transparency-in-save-function/25699/13 "2020-11-27T16:24:55Z")

</div>

Thanks for all your help on my question. I got it working, the mistake wasn’t where you said it was… What I was doing inthe draw() was right but I had “pg = createGraphics(200,100);” which was messing the program up, when I changed it to: “pg = createGraphics(width,height);” it suddenly worked… probably because I wans’t using size() but fullScreen().

---

<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 27, 2020, 10:07pm UTC](https://discourse.processing.org/t/transparency-in-save-function/25699/14 "2020-11-27T22:07:28Z")

</div>

> [@yanze03](#):
>
> I got it working

Can you post your final solution?

`:)`

---

<div class="post-metadata">

**Author:** ![yanze03](https://avatars.discourse-cdn.com/v4/letter/y/e9a140/32.png) [@yanze03](https://discourse.processing.org/u/yanze03)\
**Post date:** [November 28, 2020, 9:22am UTC](https://discourse.processing.org/t/transparency-in-save-function/25699/15 "2020-11-28T09:22:35Z")

</div>

Sure. I have already expanded on it a bit for the use it will have in the future but this works. You can make 3 drawings in the squares and they will be saved with a transparant background. It is working now because the whole screen now has the buffer.

```auto
float oldX;
float oldY;
PImage test;
PImage test2;
PImage test3;
PGraphics pg;
boolean drawscreen = true;
void setup(){
  fullScreen();
  noFill();
  background(255);
  rect(40, 150, 200 ,100);
  rect(40, 300, 200, 100);
  rect(40, 450, 200, 100);
  test = loadImage("test.png");
  pg = createGraphics(width,height);
}
void draw(){
   if (drawscreen == true) { //background(0);
  if (mousePressed) {
    pg.beginDraw();
   // pg.background(0, 0); //Semi-transparent
      pg.stroke(0);
      pg.strokeWeight(5);
      pg.line(mouseX, mouseY, oldX, oldY);
    
    pg.endDraw();
     image(pg,0,0,width,height);
  }
    oldX = mouseX;
    oldY = mouseY;
  }
 
 
}
void keyPressed(){
  if(keyPressed && key == 's'){
    test = pg.get(40,150,200,100);
    test2 = pg.get(40,300,200,100);
    test3 = pg.get(40,450,200,100);
    //pg.save("test.png");
 }
 if(keyPressed && key == 'i'){
   drawscreen = false;
  background(100, 255, 0); 
  image(test, 1000, 150);
  image(test2, 1000, 300);
  image(test3, 1000, 450);
 }
  
}

```