Menu
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
326
The canvas element only receives mouse events relative to its whole. To change cursors on sub-sections of the canvas you will indeed have to do hit-testing using mouse position relative to the canvas.
Answer: Use the CSS cursor property You can define a custom cursor using the CSS cursor property. The cursor property takes the comma-separated list of user-defined cursors value followed by the generic cursor.
To move an object, place the mouse cursor over it, press and hold down the left mouse button, then move the mouse while still holding down the left mouse button. When you have "dragged" the object to the location you want, let go of the mouse button.
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.
38
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/
141
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
