html5 canvas hand cursor problems

Question

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, but I look it up and can't find it anywhere

Answer 1

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.

Answer 2

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

Answer 3

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.