Question

I have a canvas onto which I am drawing a JavaScript game. The problem is that when the player moves the mouse, half the time they end up selecting the canvas which looks ugly.

I have tried googling around and using some CSS like -webkit-user-select: none; and variants, but nothing seems to work with a canvas.

Answer 1

Your problem is not that canvas is selectable, but that you’re not telling the browser that you want mouse used exclusively for your game.

In your mousedown/mouseup/click handlers you should run event.preventDefault() or return false.

You should do the same thing in keyboard events to avoid colliding with keyboard shortcuts.