I have a html document containing some javascript code and a canvas element.
In the javascript bit, I'm using the following code to hide the mouse pointer:
document.body.style.cursor = 'none';
And something really strange happens: the mouse pointer is hidden only when the mouse is over the canvas element, but is visible when the mouse is over the rest of the body.
I've tested this in Firefox 41 and Chrome 46. Exact same thing.
Does anybody know why this could be happening, and how it can be prevented?
To give some more context info: I'm making an interactive page, where the user first needs to click on some buttons with the mouse (so the mouse pointer needs to be visible initially), and then there's a period where interaction happens only by pressing keys, and the mouse pointer is distracting, so I want to make it disappear. Then after that, I need to resurrect the mouse pointer so the user can click on buttons again.
Thanks!