CODEWITHSUNDEEP
csshtmlcanvas
Yahoo
Yahoo

Reputation: 4187

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

Upvotes: 18

Views: 53454

Answers (5)

Callistino
Callistino

Reputation: 1085

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.

Upvotes: 6

mylesagray
mylesagray

Reputation: 8869

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

Upvotes: 0

Omiod
Omiod

Reputation: 11623

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

Upvotes: 0

Andy E
Andy E

Reputation: 344575

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/

Upvotes: 39

Mark Embling
Mark Embling

Reputation: 12821

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.

Upvotes: 0

Related Questions