Change cursor over HTML5 Canvas when dragging the mouse

Question

I have made a paint brush type of application using the Canvas Tag . I wanted that when the mouse is on the canvas the Cursor Changes ,

<canvas id="draw" style="cursor: url(image/pencil.cur)">

I have accomplished this but i cant figure out how shall i change the cursor while I Drag the mouse for drawing the image

Note that you should [avoid putting your CSS in with your HTML](http://phrogz.net/CSS/HowToDevelopWithCSS.html#separatestyle). — Phrogz, Feb 09 '11 at 15:04
http://jsfiddle.net/Mutant_Tractor/DMBWC/1/ This example shows that it does not work if you have selectable text on the page. When you drag across the canvas in my example above, it still turns into a text-select cursor. — Matthew Presser, Dec 12 '11 at 19:08

score 39 · Accepted Answer · answered Feb 09 '11 at 14:16

39

Use the :active CSS pseudo-class to change the cursor when the mouse button is down over the element:

#draw:active { 
    cursor: url(image/pencil.cur);
}

answered Feb 09 '11 at 14:16

Andy E

3

Never thought of using :active on non clickable elements... cool :) – Omiod Feb 09 '11 at 14:18
7

**Comment by [hydrarulz](http://stackoverflow.com/users/151244) (rejected edit):** You also need to add `:focus` for Chrome. It does not work in some cases with only `:active`. Replace `#draw:active {` by `#draw:active, #draw:focus {`. – Anne Dec 12 '11 at 17:13
2

It doesn't work when the canvas is inside a div that has text in it: http://jsfiddle.net/DMBWC/202/ – FernandoEscher Nov 09 '12 at 22:40
2

@FernandoEscher: seems to be a bug in WebKit, Firefox is fine. Bug filed: https://bugs.webkit.org/show_bug.cgi?id=105355. – Andy E Dec 18 '12 at 23:13
Apparently still a bug in webkit. I am seeing the same problem. I've got a canvas with cursor: crosshair; and also set both :active and :focus, and it switches to normal text selection cursor in webkit, but stays crosshair in Firefox (as of March, 2013). – Elisabeth Mar 22 '13 at 03:56
7

Instead of CSS, using preventDefault() in mouseDown works, at least in Chrome: http://stackoverflow.com/questions/11805318/when-i-click-on-a-canvas-and-drag-my-mouse-the-cursor-changes-to-a-text-selecti – Brian Slesinsky May 12 '13 at 05:20
@BrianSlesinsky's comment needs to not be buried. Pretty much the only thing that worked for me in Chrome. – Chris Jun 13 '13 at 20:48
Just a note that the WebKit/Chrome bug was fixed at some point, but slipped by me. The last few versions of Chrome seem fine. – Andy E Feb 07 '14 at 08:21

score 6 · Answer 2 · answered Apr 23 '13 at 14:30

6

For any one still looking for a solution to this webkit bug: https://bugs.webkit.org/show_bug.cgi?id=105355, this is what I did.

I added this property to the body element to make all text unselectable in my page and that's it.

body {
    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -moz-user-select: none;

    user-select: none;
}

The problem is that if you really need an element to be selectable, you will have to change its CSS to make it so.

answered Apr 23 '13 at 14:30

Callistino

+1, while not really a viable solution, an interesting workaround nonetheless. There seem to be a lot of people experiencing this issue, it would make a lot of sense for as many of you as possible to add a comment to the bug report so that developers can see the importance of fixing it. – Andy E Jun 13 '13 at 23:44
that worked for me. I set those properties on the canvas container and was good to go! – Lorenzo Oct 31 '13 at 16:09

score 0 · Answer 3 · answered Feb 09 '11 at 14:11

Two approaches I can think of for this, one of which might accomplish what you want:

Use some JavaScript to change the cursor, along the same lines as this jQuery fragment:
```
$('canvas#draw').css('cursor', 'url(image/another-cursor.cur)');
```
If you were to use that in the event for when the mouse button is pressed, and restore the original when it is released, I imagine that would have the exact effect you desire.
Draw the "cursor" on the canvas itself, and have it track the mouse position on the canvas. This way, you could draw a Photoshop-style circle (etc) to indicate where the drawing is going to take place. I'm not sure how performance might be with this approach (I've not tried it), but I imagine it ought to be fine. Just use the event which is fired on mouse move for the canvas, which is presumably what you're already using to track where the paint ought to be placed.

Myles Gray · Answer 4 · 2011-02-09T14:19:25.827

0

edited Feb 09 '11 at 14:19

answered Feb 09 '11 at 14:12

Myles Gray

score 0 · Answer 5 · answered Feb 09 '11 at 14:17

0

Add a "dragging" class to the canvas while the dragging action is on (and remove it on mouseUp)

Then add this style:

canvas {cursor: default;}
canvas.dragging {cursor: crosshair;}

answered Feb 09 '11 at 14:17

Omiod

Even this didn't work for me! It still changes to the selection cursor. – Elisabeth Mar 25 '13 at 23:15

5 Answers5