How to disable mouse movement until user clicks in the canvas in HTML5?

I’ve tried so many things, both from search results, and others I came up with myself. I have the HTML5 output but slightly modified so it shows an intro screen while the game is loading. That intro screen has a button, which when clicked on, it closes the intro graphic and goes into the game. Those changes have nothing to do with mouse input, they don’t tell the mouse to change the lookaround at all.

But here’s when something weird happens. If I open it in Chrome, when I click on that button, 90% of the time it works fine. It shows the game, and the user can start playing. But, every once in a while, when I click on the button, suddenly it’s like I had moved the mouse (I didn’t) to where the player is looking down straight to the floor, and rotated about 120º to the right.

Now, when I load it in Firefox, that happens every single time. And here’s what puzzles me. The intro graphic is not totally opaque, so when it’s on screen, you can still see the game once it finished loading in the background. And when I click the ok button and the intro disappears, I can see the regular player start point of view, but then it changes to the floor and rotated.

But the fact that happens in Firefox all the time, and in Chrome only 1 in 10 times has me puzzled. I tried all kinds of different things, one of them disabling mouse movement and lookaround, and enabling it when the user clicks, using a widget with an invisible button taking up the whole screen, it enables those two things. But nothing.

I’m out of things to try, any ideas?