14

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

1
  • 4
    Well, first off it's "cursor: pointer" not "cursor: hand"...
    – animuson
    Apr 17, 2010 at 20:46

3 Answers 3

18

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

3
  • 2
    Beautiful! I'd been looking for a solution to this for a while, who would have dreamed it was so simple? For the edification of the interwebs: the "return false" method also prevents the cursor from changing to an i-beam in Chrome. I know Atwood dislikes people showing gratitude verbally in their comments, but Thank You anyway!
    – Toji
    Jan 17, 2011 at 5:42
  • 2
    For webkit browsers you can also add body { -webkit-user-select: none; } to your CSS.
    – Jacksonkr
    Sep 1, 2011 at 17:07
  • nice! That saved me quite a bit of time! Feb 26, 2012 at 16:38
12

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.

0
7

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.

4
  • particularly this note is helpful in the mentioned link quirksmode.org/css/cursor.html#note Apr 17, 2010 at 20:56
  • i put that in but still doing the same thing. Check it here: p-func.com/html5_test/test2.html
    – pfunc
    Apr 17, 2010 at 21:30
  • @pfunc - I can't debug your page directly, it has a few invalid properties that needs correcting... <script> tags need to be <script></script>, they can't be self closing like <script />. Also there's an extra <body> tag in there...can't debug funky behavior until it's valid :) Apr 17, 2010 at 21:55
  • thanks, this is what happens when a flash developer tries to go back to html. I chnaged those and still happening.
    – pfunc
    Apr 17, 2010 at 22:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.