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

Answer 1

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.

Answer 2

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/