How can I replace my cursor with a circle instead

Question

The problem: I'm trying to create a simple drawing app using p5.js. Instead of the standard cursor image, I'd like to show a circle at my cursor location that represents the size of the drawing brush.

Potential solution 1: Replace the cursor using the cursor() function native to p5.

Why it doesn't work: The p5 cursor function only takes the following parameters:

ARROW, CROSS, HAND, MOVE, TEXT, or WAIT, or path for image

As such, there's no native way to replace the cursor using the ellipse class.

Potential solution 2: Use the noCursor() function and then draw the circle at the cursor location, while also drawing the background, as such:

var brushSize = 50;

function setup() {
  createCanvas(1080,720);
  noCursor();
}


function draw() {
  background(100);
  ellipse(mouseX,mouseY,brushSize);

}

Why it doesn't work: While this solution gets the desired effect i.e. replacing the cursor with a circle the size of the brush, the constantly updating background prevents me from actually drawing to the canvas with the brush when I want to.

Is there some way I can replace the cursor without actually drawing the ellipse to the canvas? Is there any way to save and then instantly reload a canvas in p5? I couldn't find such a method searching through the API docs. Any hints are appreciated.

Answer 1

Create a circular DIV inside the canvas container and show it on top of the actual canvas.

Answer 2

According to the reference, you can pass a URL into the cursor() function to set an image.

If you want to use an image that you draw, you're going to have to draw them ahead of time and save them to files, and then use those files. Something like this:

cursor('images/ellipse-15.png');

Where ellipse-15.png is an image that you generated ahead of time, to match when brushSize is 15, for example.

Btw P5.js is just setting the cursor CSS property. You can read more about it here.

If you want to go with the noCursor() approach and draw the ellipse yourself, you could draw your drawing to a buffer (the createGraphics() function is your friend) and then draw the ellipse on top of that every frame. I'd still probably use a cross cursor just because there's going to be some annoying lag if you draw it yourself.