Checking for mouse events outside of game area

My game’s canvas is within a web page which I designed to extend the colors of the game world, so it’s hard to tell where the canvas ends and the rest of the page begins. While looking nice and making the game world visually larger it makes difficult for the player to understand where the interactive area begins.
Floz: an ounce of water here’s the working prototype.
You’d probably say that the game shouldn’t be able to respond to anything happening outside, but when I click the page, it does react to mouse moving to the click position and even reacts to the prolonged press event (which charges the shot). However it does not react to releasing mouse (it doesn’t launch the charged projectile).
How can I fix that?

{ input: { mouse: { target: window } } }

in game config.

Thanks, it does react to moving now, but still not to releasing mouse outside of the canvas.

I think you can still use POINTER_DOWN_OUTSIDE.

1 Like