Sometimes, we want to hide mouse cursor when mouse is within HTML5 canvas with JavaScript.

In this article, we’ll look at how to hide mouse cursor when mouse is within HTML5 canvas with JavaScript.

How to hide mouse cursor when mouse is within HTML5 canvas with JavaScript?

To hide mouse cursor when mouse is within HTML5 canvas with JavaScript, we can set the cursor CSS property to 'none'.

For instance, we write:

<canvas width='200' height='200'></canvas>

to add a canvas.

Then we write:

document.querySelector('canvas').style.cursor = "none";

to select a canvas with querySelector.

And then we set the canvas’ style.cursor to 'none' to hide the cursor when the mouse is in the canvas.

Conclusion

To hide mouse cursor when mouse is within HTML5 canvas with JavaScript, we can set the cursor CSS property to 'none'.