How do I get a hover in the front layer without having it refresh the entire image?

DoctorWhoops

I've recently started getting into working with Processing for a University Lecture, and I've started working on a simple drawing tool. While the drawing itself and choosing shape and color work fine the way the code is now, I want a hovering shape representing the current brush so you can see where and how you're drawing.

If I place the hovering shape in front of the drawing then the entire drawing gets refreshed with every loop, so you can't draw. When I put it behind the drawing like it is in the code the way it is now, you won't see it after having drawn your image.When I put it in front but don't refresh it, it leaves a trail.

How can I make the shape hover in front of the drawing at the mouse position without leaving a trail or clearing the image?

Code for reference (sorry if it's messy, I've only been doing this for a few weeks).

Code:

int c;
int size = 50;
int r;
int red;
int green;
int blue;
float easingEllipse = 0.5;
float easingLine = 0.3;
float x;
float y;
int colorInterval = 5;
color bgColor = color(200, 200, 200);

PGraphics bg;
PGraphics drawing;
PGraphics display;


void setup() {
size(800, 800);
smooth();
frameRate(1000);
bg = createGraphics(width, height);
drawing = createGraphics(width, height);
display = createGraphics(width, height);
}

void draw() {
bg.beginDraw();
bg.background(bgColor);
bg.endDraw();
if (r==0) {
bg.beginDraw();
bg.ellipseMode(CENTER);
bg.noStroke();
bg.fill(red, green, blue);
bg.ellipse(x, y, size, size);
bg.endDraw();
float targetX = mouseX;
x += (targetX - x) * easingEllipse;
float targetY = mouseY;
y += (targetY - y) * easingEllipse;

if (mousePressed == true) {
  drawing.beginDraw();
  drawing.noStroke();
  drawing.strokeWeight(size);
  drawing.stroke(red, green, blue);
  drawing.line(pmouseX, pmouseY, mouseX, mouseY);
  drawing.endDraw();
}
} else if (r==1) {
float targetX = mouseX;
x += (targetX - x) * easingLine;
float targetY = mouseY;
y += (targetY - y) * easingLine;
bg.beginDraw();
bg.stroke(red, green, blue);
bg.strokeWeight(4);
bg.line(x, y-size/2, x, y+size/2);
bg.endDraw();
if (mousePressed == true) {
  drawing.beginDraw();
  drawing.stroke(red, green, blue);
  drawing.strokeWeight(4);
  drawing.fill(red, green, blue);
  drawing.quad(pmouseX, pmouseY-size/2, mouseX, mouseY-size/2, mouseX, mouseY+size/2, pmouseX, 
pmouseY+size/2);
  drawing.endDraw();
}
} else if (r==2) {
float targetX = mouseX;
x += (targetX - x) * easingLine;
float targetY = mouseY;
y += (targetY - y) * easingLine;
bg.beginDraw();
bg.stroke(red, green, blue);
bg.strokeWeight(4);
bg.line(x-size/2, y, x+size/2, y);
bg.endDraw();
if (mousePressed == true) {
  drawing.beginDraw();
  drawing.stroke(red, green, blue);
  drawing.strokeWeight(4);
  drawing.noStroke();
  drawing.fill(red, green, blue);
  drawing.quad(mouseX-size/2-4, mouseY, pmouseX-size/2-4, pmouseY, pmouseX+size/2+4, pmouseY,  
mouseX+size/2+4, mouseY);
  drawing.endDraw();
}
} else if (r==3) {
float targetX = mouseX;
x += (targetX - x) * easingEllipse;
float targetY = mouseY;
y += (targetY - y) * easingEllipse;
bg.beginDraw();
bg.ellipseMode(CENTER);
bg.noStroke();
bg.fill(bgColor);
bg.ellipse(x, y, size, size);
bg.endDraw();
if (mousePressed == true) {
  drawing.beginDraw();
  drawing.noStroke();
  drawing.ellipseMode(CENTER);
  drawing.fill(bgColor);
  drawing.stroke(bgColor);
  drawing.strokeWeight(size);
  drawing.line(pmouseX, pmouseY, mouseX, mouseY);
  drawing.endDraw();
}
  }

  display.beginDraw();  

  display.fill(50);
  display.noStroke();
  display.rect(0, 0, width, 20);
display.textSize(15);
display.fill(255);
display.text(red, 10, 15); 
display.text(green, 100, 15);
display.text(blue, 190, 15);
display.text(size/5, width-40, 15);
display.fill(50);
display.rect(width-70, height-70, width, height);
if (r<3) {
display.fill(red, green, blue);
} else {
display.fill(bgColor);
}
if (r==1) {
display.strokeWeight(4);
display.stroke(red, green, blue);
display.line(width-35, height-60, width-35, height-10);
} else if (r==2) {
display.strokeWeight(4);
display.stroke(red, green, blue);
display.line(width-60, height-35, width-10, height-35);
} else {
display.noStroke();
display.ellipse(width-35, height-35, 50, 50);
}

display.endDraw();

image(bg, 0, 0);
image(drawing, 0, 0);
image(display, 0, 0);
}


void keyPressed() {
if (keyPressed) {
if (key==CODED) {
  if (keyCode==UP) {
    size+=5;
  } else if (keyCode==DOWN && size>0) {  
    size-=5;
  }
}

if (key=='r' && r<3) {
  r += 1;
} else if (key=='r' && r==3) {
  r = 0;
} else if (key=='u' && red<255) {
  red+=colorInterval;
} else if (key=='i' && green<255) {
  green+=colorInterval;
} else if (key=='o' && blue<255) {
  blue+=colorInterval;
} else if (key=='j' && red>0) {
  red-=colorInterval;
} else if (key=='k' && green>0) {
  green-=colorInterval;
} else if (key=='l' && blue>0) {
  blue-=colorInterval;
} else if (key=='p') {
  red = int(random(0, 255));
  green = int(random(0, 255));
  blue = int(random(0, 255));
}
 }
 }

And now that I'm posting here anyway, I was also wondering how I could make it so the key bindings in the code are instead connected to buttons on an Arduino program. While I've worked with both individually I would like to combine them for this project, but have no experience with this. Anyone know what to do to get me started?