When I click on a canvas and drag my mouse, the cursor changes to a text-selection cursor. How can I prevent this?

Question

Here's a fiddle: http://jsfiddle.net/MZ9Xm/

Note: The following occurs in Chrome 22.0.1221.1, but not in Firefox 14.0.1. [Ubuntu linux]

Move your mouse to the top canvas and press and hold the mouse button. Drag the mouse, and the cursor will change to a text-selection mouse cursor (I-bar). This does not happen if there are no other elements on the page.

I've messed around with setting user-selection to none, but have not had any luck.

Answer 1

You can bind a mousedown event in your canvas to prevent default behavior.

Something like:

// with jQuery
$( "#canvasId" ).mousedown(function(event){
    event.preventDefault();
});

// without jQuery
document.getElementById( "canvasId" ).onmousedown = function(event){
    event.preventDefault();
};

Here is the updated fiddle: http://jsfiddle.net/MZ9Xm/1/

You will need to test this to see if there is some side effect in what you are doing.

Answer 2

Have you tried using the CSS cursor property ?

canvas {
    cursor: pointer;
}

It should display the default cursor.

Answer 3

Try this:

var canvasEls = document.getElementsByTagName('canvas'),
    preventHl = function () { return false; },
    i = 0;

while (i < canvasEls.length) {
    canvasEls[i].onmousedown = preventHl;
    i += 1;
}

Returning false will prevent default actions such as highlighting from occurring.