I have a canvas where you can draw and I would like the user to see the size of the point he is drawing. So I need to draw a custom cursor as 10x10 pixel square on the canvas. Of course I would not like to paint over the image while the user is just moving the mouse.

My ideas how I could do this:

1. I could somehow backup the original image and paint it all over every time
2. I could move a with the cursor. But I would need to forward every click and make it invisible if the cursor left the canvas.
3. I could create a layered canvas with a second canvas on top of mine just for drawing the cursor.

What would be the best to do this?

Update

Sorry, I did not explain myself very well. The cursor will need to change color and snap to a grid, so I really need to paint it myself. I know about css cursor:url(...) that does not work for me.

I have a canvas where you can draw and I would like the user to see the size of the point he is drawing. So I need to draw a custom cursor as 10x10 pixel square on the canvas. Of course I would not like to paint over the image while the user is just moving the mouse.

My ideas how I could do this:

1. I could somehow backup the original image and paint it all over every time
2. I could move a with the cursor. But I would need to forward every click and make it invisible if the cursor left the canvas.
3. I could create a layered canvas with a second canvas on top of mine just for drawing the cursor.

What would be the best to do this?

Update

Sorry, I did not explain myself very well. The cursor will need to change color and snap to a grid, so I really need to paint it myself. I know about css cursor:url(...) that does not work for me.

• javascript
• jquery
• html
• html5-canvas

Share Improve this question Follow edited May 23, 2017 at 11:50 CommunityBot 111 silver badge asked May 6, 2013 at 15:26 PiTheNumberPiTheNumber 23.6k1717 gold badges113113 silver badges189189 bronze badges 4

• Check this: w3schools./cssref/pr_class_cursor.asp – David Starkey Commented May 6, 2013 at 15:28
• Why don't you just use the CSS3 cursor style? htmlgoodies./beyond/css/… – PitaJ Commented May 6, 2013 at 15:31
• @DavidStarkey Thank you, but does not work for me. I need a black square in a custom color. Also the square can not move freely but need to jump in the given grid. – PiTheNumber Commented May 6, 2013 at 15:31
• 1 You can use an image for the cursor, so really you can make it whatever you want: w3schools./cssref/… – David Starkey Commented May 6, 2013 at 15:32

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Checkmark+1 to PitaJ and David Starkey--they are correct.

The simplest/most efficient solution is to modify the cursor itself. As mentioned, you can even do custom images for the cursor to do your color changes.

But if you absolutely need snap-to-grid then you have to go with something like the layered cursor canvas. There's no way to force a user's cursor into grid alignment. (Think of the pranks that would result!)

Both number 1 and 3 would work. I would go with number 3 myself. "Best" however is up to you.

CSS3:

#canvas1 {
    cursor: url(./myCursor.cur), none;
}