CODEWITHSUNDEEP
javascripthtml
pfunc
pfunc

Reputation: 1305

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

Upvotes: 14

Views: 21665

Answers (3)

Kris
Kris

Reputation: 189

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

Upvotes: 18

Damon Oehlman
Damon Oehlman

Reputation: 481

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.

Upvotes: 12

Nick Craver
Nick Craver

Reputation: 630409

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.

Upvotes: 7

Related Questions