HTML5 canvas draw custom cursor

Question

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.

Answer 1

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.