Change cursor over HTML5 Canvas when dragging the mouse

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

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);
}

Working example: http://jsfiddle.net/nXv63/

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.

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.

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;}

Works fine here: http://jsfiddle.net/Mutant_Tractor/DMBWC/1/

来源：https://stackoverflow.com/questions/4945874/change-cursor-over-html5-canvas-when-dragging-the-mouse

标签