# PGraphics and Image problem

**URL:** https://discourse.processing.org/t/pgraphics-and-image-problem/38464
**Category:** Coding Questions
**Created:** [August 23, 2022, 5:18pm UTC](https://discourse.processing.org/t/pgraphics-and-image-problem/38464 "2022-08-23T17:18:48Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![eltrem](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eltrem/32/3023_2.png) [@eltrem](https://discourse.processing.org/u/eltrem)
#### Post date: [August 23, 2022, 5:18pm UTC](https://discourse.processing.org/t/pgraphics-and-image-problem/38464/1 "2022-08-23T17:18:48Z")

</div>

Hi everyone!

I’m struggling with a problem which i cant seem to solve.  
I’m using PGraphics to sequentially save “layers” of my drawing as pngs with alpha channel.  
Once i’ve drawn my elements and saved each of them as pngs, i want to blend all this elements together into a single png with alpha channel, as well as draw this composed image in the canvas.

I managed to accomplish all this -not without some botch trickery-, at the price of my sketch not updating anymore when a new frame is redrawn.

Why is this happening?

if i just comment the lines of code which draw the images of the layers to a new pgraphics context the problem disappears… but i don’t have my image with the blended layers saved any more… what can i do?

```auto
PGraphics pg;
PGraphics rtm;
PGraphics harm;
PGraphics full;

void setup() {
  size(800, 600);
  pg = createGraphics(width, height);
  rtm = createGraphics(width, height);
  harm = createGraphics(width, height);
  full = createGraphics(width, height);
  initAll(); 
}

void draw() {  
  background(0); 
  

  drawFunc1(); //draw this function
  copyGraphics(pg, rtm); //copy to the rtm context
  rtm.save("rtm.png"); //save png
  pg.clear(); //clear pg context
  

  drawFunc2();
  copyGraphics(pg, harm);  
  harm.save("harm.png");
  pg.clear();
  
  //draw the 2 previous contexts on a third context, and save a png
  full.beginDraw();
  full.image(harm,0,0); //commenting this line and the next one makes the
  full.image(rtm,0,0); //sketch run. Why does the sketch not work if this lines are executed? 
  full.endDraw();
  full.save("full.png"); 
  
  //draw the 2 contexts on the canvas and save a png
  image(harm, 0, 0); 
  image(rtm, 0, 0);
  save("canvas.png"); 
  
  //clear all
  harm.clear();
  rtm.clear(); 
  full.clear();   
}

void drawFunc1(){
  pg.beginDraw();
  pg.stroke(255);
  pg.fill(255,0,0);
  pg.ellipse(random(width),random(height),100,100);
  pg.endDraw();
}

void drawFunc2(){
  pg.beginDraw();
  pg.stroke(255);
  pg.fill(0,0,255);
  pg.rect(random(width),random(height),100,100);
  pg.endDraw();
}

void initAll(){
  
  pg.beginDraw();
  pg.background(0);
  pg.endDraw();
  
  rtm.beginDraw();
  rtm.background(0);
  rtm.endDraw();
  
  harm.beginDraw();
  harm.background(0);
  harm.endDraw();
  
  full.beginDraw();
  full.background(0);
  full.endDraw();
  
  pg.clear();
  harm.clear();
  rtm.clear();
  full.clear();
}

PGraphics copyGraphics(PGraphics src, PGraphics dest) {

  src.loadPixels();
  dest.loadPixels();
  arrayCopy(src.pixels, 0, dest.pixels, 0, src.pixels.length);
  dest.updatePixels();
  return dest;
}

```

---

<div class="post-metadata">

### Author: ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)
#### Post date: [February 5, 2023, 6:48pm UTC](https://discourse.processing.org/t/pgraphics-and-image-problem/38464/3 "2023-02-05T18:48:35Z")

</div>

Hi @eltrem,

No chance to test currently, but the `clear()` function calls should imo be called between `beginDraw()/endDraw()` to take effect.

> **[clear() / Reference](https://processing.org/reference/clear_.html)**
>
> Clears the pixels within a buffer. This function only works on PGraphics objects created with the createGraphics() function. Unlike the main graphics context (the display window), pixels…

Also on `initAll` it doesn’t makes much sense to set `background(0)` and call `clear()`.  
So, either you want black or you want transparent. 🙂

Cheers  
— mnse