Thread: Help with editing offscreen graphics

I'm starting a new paint project to get some experience with java. I've been working with Processing for a while, and I'm struggling to transition. The goal is to make a program in which several graphics objects are created, then the selected graphic is modified (drawn on) when the mouse is dragged. The output I'm looking for is the graphics layered on top of each other. I'm pretty lost, and I would definitely appreciate some help from someone more experienced that myself. Here's what I have:

import java.awt.*;
import javax.swing.*;
 
class SlugPaint2{
  public static void main(String[] args){
    JFrame frame = new JFrame("SimplePaint");
    Container mainPane = frame.getContentPane();
    DrawingCanvas layers = new DrawingCanvas();
    PaintListener mouse = new PaintListener();
    layers.addMouseMotionListener(mouse);
    frame.setSize(600,400);
    mainPane.add(layers);
    frame.setVisible(true);
  }
}

import java.awt.*;
import java.awt.event.*;
import java.awt.Color.*;
import javax.swing.*;
 
public class PaintListener implements MouseMotionListener, MouseListener{
  public void mouseDragged(MouseEvent e){
  DrawingCanvas layerOneCanvas = (DrawingCanvas)e.getSource();
  Graphics layerOne = layerOneCanvas.getCanvasGraphics();
  Graphics2D layerOne2D = (Graphics2D)layerOne;
  updateMousePos(e);
  updateMenu(e);
    layerOne2D.setBackground(Color.WHITE);
    layerOne2D.setStroke(new BasicStroke(2));
    layerOne2D.drawLine(currentMousePosX, currentMousePosY, lastMousePosX, lastMousePosY);
  layerOneCanvas.repaint();
  }
  public void mouseMoved(MouseEvent e){
  updateMousePos(e);
  }
  public void updateMousePos(MouseEvent e){
    lastMousePosX=currentMousePosX;
    lastMousePosY=currentMousePosY;
    currentMousePosX=e.getX();
    currentMousePosY=e.getY();
  }
  public void updateMenu(MouseEvent e){
  DrawingCanvas guiLayer = (DrawingCanvas)e.getSource();
  Graphics paintingMenu = guiLayer.getMenuGraphics();
  Graphics2D paintingMenu2D = (Graphics2D)paintingMenu;
  paintingMenu2D.drawString("this is the top layer. It will display the images that will work as a custom gui.", 10,200);
  paintingMenu2D.drawString("the lower layer that shows the painting is underneath this. go to 'void paintComponent' in", 10,220);
  paintingMenu2D.drawString("DrawingCanvas.java and swap the order of which layer is drawn first.",10,240);
  guiLayer.repaint();
  }
  public void mousePressed(MouseEvent e){}
  public void mouseReleased(MouseEvent e){}
  public void mouseEntered(MouseEvent e){}
  public void mouseExited(MouseEvent e){}
  public void mouseClicked(MouseEvent e){}
  int lastMousePosX, lastMousePosY;
  int currentMousePosX, currentMousePosY;
  public static boolean firstLayerVisible = true;
}

import java.awt.*;
import javax.swing.*;
 
class DrawingCanvas extends JComponent{
  protected void paintComponent(Graphics g){
    if(layerOneImage!=null)
      g.drawImage(layerOneImage,0,0,SIZE, SIZE, null);
    if(paintingMenuImage!=null)                                      //comment out this line. thise draw the top layer
      g.drawImage(paintingMenuImage,0,0,SIZE, SIZE, null); //comment out this line as well. you will see the drawing canvas
    }                                                                         //without the top layer being shown to block the bottom
 
    public Graphics getCanvasGraphics(){
      if(layerOneImage==null){
        layerOneImage = createImage(SIZE, SIZE);
        layerOneGraphics = layerOneImage.getGraphics();
      }
      return layerOneGraphics;
    }
    public Graphics getMenuGraphics(){
      if(paintingMenuImage==null){
        paintingMenuImage = createImage(SIZE, SIZE);
        paintingMenuGraphics = paintingMenuImage.getGraphics();
      }
      return paintingMenuGraphics;
    }
 
    public Dimension getMinimumSize(){
      return new Dimension(SIZE,SIZE);
    }
    public Dimension getPreferredSize(){
      return new Dimension(SIZE,SIZE);
    }
    private static final int SIZE = 600;
    private Image layerOneImage;
    private Graphics layerOneGraphics;
    private Image paintingMenuImage;
    private Graphics paintingMenuGraphics;
}

There is no compilation error, but it isn't doing what I would like it to do. Currently, if your mouse is dragged, it will draw a line from your previous position to your current position with a stroke thickness that becomes larger when you move the mouse faster, and smaller when moving the mouse slower. There is also a thin diagonal red line that is the second graphic lying on top of the first (did this to test if I could layer the graphics). There was an if statement that would draw the diagonal red line if the mouse x and y coords were greater than 100 (I did that to test if I could draw in the layers individually) but took that out. Now the line is drawn every frame. I've been working on it for the past few days, and I can't seem to figure out how to turn individual layers on and off (make them visible/invisible), nor am I having much luck at figuring out a simple and clean interface, even if it was just pressing a few keys for now.

1) the 'layer' that I'm referring to would be the equivalent to a transparency slide that is being painted on. If you were to take these and then stack them on top of each other, you would be able to see through to them to the lower layers where there is no color.
2)I didn't mention it before, since I didn't want to overload this with more questions, but that is an issue that I would also like to fix. I'd like to resize the component and maintain the image. If the component is smaller than the image, you only see part of it and will have the ability to scroll up/down, left/right to see the entire image.
Sorry if I'm unclear; I'll be glad clarify in any way needed.

Here is an earlier program I made with Processing. This is about the end result I'm going for, but I'm just taking one step at a time.
http://people.ucsc.edu/~blauwill/PaintProto/

Thanks for the link! As for the buffering method, that's the same concept as what I did for the prototype in my link. I just don't know how to implement it in java

From what I've found so far, it seems like I will want to create a BufferedImage that corresponds to each Graphics2D object (I think).
BufferedImage layerOneImage = new BufferedImage(400,400,BufferedImage.TYPE_INT_ARGB) ;
this is where I'm at. I'm guessing that the graphics will be cast to BufferedImages and the new BufferedImage will be what is displayed? It seems like the natural thing to do but I've tried it, got a type mismatch, and not sure where to go from here...

I'm not sure what you mean. Are you saying to cast a Graphics2D onto a BufferedImage?

Edit:
Ok, here is what I've changed. No compilation errors, but the image won't appear:
BufferedImage layerOneBuffImage = new BufferedImage(400,400,BufferedImage.TYPE_INT_ARGB) ;
Graphics layerOneGraphics = layerOneBuffImage.getGraphics();
Graphics2D layerOneGraphics2D = (Graphics2D)layerOneGraphics;

Ok, I've been working on it for a while now. I've been able to get past your step 3, but I'm stuck again. I have two graphics objects that are being edited offscreen, but when I use paintComponent() it only shows the last image to be drawn. I edited the code above to show what I have so far. I'm not sure if I've said this yet but thank you so much for the help.

The new code above now compiles

I swapped the code for paintListener to print a sentence in the middle instead of using images. I might have done that after you ran the version that used images. try and use the paintListener class that is at the top now. it show show a sentence when you drag the mouse. sorry about that

Trimmed the fat out

there is another layer behind it that lets you use the mouse to draw. The issue is this bottom layer isn't visible through the top layer with the text. the goal is to be able to paint on the bottom layer, have it be visible, and still see the text on top. I added 2 comments to the paintListener to show where to comment out the top layer. Once the top layer is commented out you will be able to see the bottom layer by itself.

yes, but then the image (bottom layer) will have the text in it. the goal was to display both layers, but keep them separate so that I can save the bottom layer without having the top layer being part of it. Drawing the gui onto the canvas would mar the drawing for when it comes time to export it.

The only thing in the top layer is just the text. Shouldnt the rest of the top layer be transparent already?