Make the cursor a self-drawn image

问题:

I have a paint application program I have programmed from scratch in processing.js and incorporated it into my markdown code on my GitHub page.

This means I would prefer to not use CSS (I would have to link to a JavaScript program that creates a link element to the CSS file and appends it to the head).

In the paint program, there is an eraser that just paints the background, but I want it to look more like they are using an eraser by changing the cursor to the eraser when they have the eraser selected. How could I implement this?

Research - What I have already Tried

At Custom Cursor Image CSS, it needs to be an image, but I want a function that I call inside the file so I can always update it. I also would like to use JavaScript, not CSS.

I have read up on https://processing.org/tutorials/interactivity/ but there is nothing in there about custom cursors, just named ones and images.

Update

I am using the createGraphics function but I can't get it to work as a cursor: http://processingjs.org/reference/createGraphics_/

Links

I host this program in these places

• https://knowledgeablekangaroo.github.io/paint-a-picture-backup/
• https://www.khanacademy.org/computer-programming/paint-a-picture-v219/4631918938554368
• https://www.khanacademy.org/computer-programming/paint-a-picture/5366591758565376

回答1:

One approach is to set the cursor to none which will hide the cursor, and then draw the cursor however you want inside your Processing sketch. Here's a very basic example:

void draw(){
  background(32);
  ellipse(mouseX, mouseY, 20, 20);
}

This will show your cursor as an ellipse.

Another approach might be to use a data URI. You'd have to convert your drawing into a 64-bit endoded image, and then pass that into the CSS. I haven't actually tested this.