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 ,

Answer 1

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

1. 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.

2. 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.