I've got some sample code that I'm trying to get working. I want to be able to draw on a layer above the g PGraphics object, then save it to a PImage, then display it on demand. I've got the layer transparency working...I can draw to my new PGraphics layer, and toggle it on and off. But, when I save it to a PImage, then try to display the PImage, it is solid black. Within the program, I want to be able to draw some lines, press 's', press 'd', then press 'a' and be looking at the same image. Can anyone help?

Code:

PGraphics pg;

PImage frame;

boolean displayOverlay;
boolean displayFrame;

void setup() {
  size(600, 600, JAVA2D);
  background(230);
  fill(255, 0, 0);
  stroke(0);
  strokeWeight(6);
  
  pg = createGraphics(600, 600, JAVA2D);
  pg.background(230);
  pg.noFill();
  pg.stroke(0);
  pg.strokeWeight(6);
  
  displayOverlay = true;
  displayFrame = false;
  
  frame = createImage(600, 600, ARGB);
}

void draw() {
  background(230);
  rect(250, 250, 100, 100);
  
  pg.beginDraw();
  if(mousePressed)
    pg.line(mouseX, mouseY, pmouseX, pmouseY);
  pg.endDraw();
  
  if(displayOverlay == true)
    image(pg, 0, 0);
  if(displayFrame == true)
    image(frame, 0, 0);
}

void keyPressed() {
  if(key == 'd') {
    displayOverlay = !displayOverlay;
    println("Toggling overlay.");
  }
  
  if(key == 's') {
    frame = pg.get();
    println("Saving overlay.");
  }
  
  if(key == 'a') {
    displayFrame = !displayFrame;
    println("Toggling frame.");
  }
} 

Thanks for the help! I was able to get the parent code working. Having so many PGraphics is using up a lot of memory (PImage would be the same though). I will try to think of a more efficient way. Now I am trying to implement the onion skin component through tinting. I've pasted the code below; the only real change is that I try to tint the "frame" PGraphics with .tint(255, 0, 0, 128) It doesn't seem to be working.

Code:

PGraphics pg;
PGraphics frame;

boolean displayOverlay;
boolean displayFrame;

void setup() {
  size(600, 600, JAVA2D);
  background(50);
  fill(255, 0, 0);
  stroke(255);
  strokeWeight(6);
  
  pg = createGraphics(width, height, JAVA2D);
  pg.beginDraw();
  pg.noFill();
  pg.stroke(255);
  pg.strokeWeight(6);
  pg.endDraw();
  
  displayOverlay = true;
  displayFrame = false;
  
  frame = createGraphics(width, height, JAVA2D);
}

void draw() {
  background(50);
  rect(250, 250, 100, 100);
  
  if (mousePressed) {
    pg.beginDraw();
    pg.line(mouseX, mouseY, pmouseX, pmouseY);
    pg.endDraw();
  }
  
  if(displayOverlay)
    image(pg, 0, 0);
  if(displayFrame)
    image(frame, 0, 0);
}

void keyPressed() {
  if (key == 'd') {
    displayOverlay = !displayOverlay;
    println("Toggling overlay.");
  }
  
  if (key == 's') {
    frame.beginDraw();
    frame.image(pg, 0, 0);
    frame.tint(255, 0, 0, 128);
    frame.endDraw();
    println("Saving overlay.");
  }
  
  if (key == 'a') {
    displayFrame = !displayFrame;
    println("Toggling frame.");
  }
}  

I think I figured it out. I tinted the onion-skin layer before calling .image() and saving the old paint layer to it. This is from my actual program, not the test program, so the variable/function names are different.

Code:

void drawOnionLayer() {
  onionLayer.beginDraw();
  onionLayer.background(backgroundColor); //Clear the last onion-skin
  PGraphics buffer = (PGraphics) frames.get(frames.size() - 1); //Add the latest painted frame to the onion-skin layer
  onionLayer.tint(255, 128); //This does the tinting
  onionLayer.image(buffer, 0, 0); //This displays it, tinted
  onionLayer.endDraw();
}