Make PGraphic Object the 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);
}