Categories
JavaScript Answers

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

Spread the love

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'.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *