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.

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.

• javascript
• html

2 Answers 2

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.

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; }