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

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


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

Something like:

// with jQuery$( "#canvasId" ).mousedown(function(event){    event.preventDefault();});// without jQuerydocument.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.


Have you tried using the CSS cursor property ?

canvas {    cursor: pointer;}

It should display the default cursor.


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.