Make PGraphic Object the cursor - cursor

Question

This is a follow-up of my question: Make the cursor a self-drawn image.
I have a paint a picture application. The latest working version can be found here: https://knowledgeablekangaroo.github.io/paint-a-picture-backup/, where the code can be found in F12 > Sources > paint-a-picture.js.
The user can choose a color, set the background, set the thickness, shape, and opacity. There is also an eraser functionality. I want there to be a better user experience, so I am trying to draw the eraser below as the cursor. If the cursor doesn't work, I need something that doesn't smear.
The way I have programmed it, anywhere inside the "paint area" (above control center and below pallete) will smear - the background() is outside the draw.
var pg = createGraphics(pgDimensions.w, pgDimensions.h, JAVA2D);
pg.beginDraw();
pg.fill(255, 200, 255);
pg.strokeWeight(2);
pg.rect(0, 0, pgDimensions.w, pgDimensions.h);
pg.fill(0);
pg.textAlign(CENTER, CENTER);
pg.text("ERASER", pgDimensions.w / 2, pgDimensions.h / 2);
pg.endDraw();
I used the createGraphics() function to create a PGraphics Object. The point is to show the eraser while This shows the eraser I have drawn in the pGraphic above.
In the drawBrush() function, I make this an image.
var drawBrush = function() {
fill(currentColor);
noStroke();
shapes.forEach(function (element, index) {
if (pshape == index) {
element.brush();
}
});
if (C === bgColor) {
image(pg, mouseX - pgDimensions.w / 2, mouseY - pgDimensions.h / 2);
}
};
Research
This best describes my problem

Answer 1

After you have a graphics stored in your pg variable, you can draw that using the image() function:
image(pg, mouseX, mouseY);
Here's a small example that demonstrates what I'm talking about:
var pg;
function setup() {
createCanvas(400, 400);
pg = createGraphics(100, 100);
pg.ellipse(50, 50, 100, 100);
}
function draw() {
background(220);
image(pg, mouseX, mouseY);
}