Custom Mouse Cursor Javascript Painting Application

Question

I am working on a web application that allows the user to draw on the canvas element. I am using HTML5 and javascript.

I am wondering if it is possible for the mouse to change to a paint brush icon when the user selects to paint and an eraser icon when the user selects to erase etc etc.

Any ideas how I might achieve this? Thanks

Answer 1

Suppose the only way will be using css cursor property with an url set to your image:

body {
   cursor:url('/url/to/required/image.jpg');
}

For more details see: https://developer.mozilla.org/en-US/docs/CSS/cursor

Or setting it with JS:

document.body.style.cursor = "url('/url/to/required/image.jpg')";