Clicking inside canvas element selects text

Question

I have a canvas element in my HTML document. When I click inside of the canvas multiple times, it selects part of my <h1> element's text, which is before the <canvas> tag. Is there a way to stop this from happening? I am guessing there is a JavaScript solution.

Answer 1

Returning false in an event stops the standard event from happening:

document.getElementById('canvas').onmousedown = function(){
  return false;
};

Edit: I just found out that text selection is done before onclick is fired, a better option is onmousedown.

Answer 2

If you want to use the mousedown event to do other things, you can prevent only text selection more specifically by setting the onselectstart event to return false.

//give your canvas an id, I used 'can'    
var canvas = document.getElementById('can');
canvas.onselectstart = function () { return false; }