html5 canvas hand cursor problems

I'm playing around with html5 and some javascript to make a minor sketchpad. Whenever I click down on the canvas in chrome, the cursor becomes a text cursor. I have tried putting cursor: hand in the css, but that doesn't seem to work. This has got to be an easy thing, b开发者_JAVA百科ut I look it up and can't find it anywhere

Use the disable text selection on the canvas. This works like a charm.

var canvas = document.getElementById('canvas');
canvas.onselectstart = function () { return false; } // ie
canvas.onmousedown = function () { return false; } // mozilla

Cheers, Kris

While the other guys were absolutely bang on referring you to the quirksmode reference, that won't fix the problem you are having, and essentially you need to implement a variation of Kris's answer.

In my own implementation, I found that preventing default behaviour in the mousedown event was all that was required to stop that pesky text selection cursor:

function handleMouseDown(evt) {
  evt.preventDefault();
  evt.stopPropagation();

  // you can change the cursor if you want
  // just remember to handle the mouse up and put it back :)
  evt.target.style.cursor = 'move';

  // rest of code goes here
}

document.addEventListener('mousedown', handleMouseDown, false);

Hope that helps.

Cheers, Damon.

Use pointer for your cursor property instead, like this:

canvas { cursor: pointer; }

hand is IE/Opera specific, you can see a full list of which cursors work in which browsers here.