How to make a scalable custom cursor for HTML5 canvas drawing

I have an html5 canvas drawing application similar to this http://jsfiddle.net/rnNFB/1/, but using the default cursors the user is not able to tell how big the brush size is (lineWidth setting). Of the default cursors, the cross-hair cursor that has a circle is nearly perfect, I just need to be able to scale the graphic or circle portion up or down depending on the user's brush size setting to reflect how big their next brush stroke will be.

T开发者_JS百科hanks.

#myCanvas { cursor:none; }

Then draw the cursor of your liking inside the canvas :)

Alternatively, you can create .ico/.cur files and use them in your CSS, then switch classes:

#myCanvas.lineMode { cursor: url(../images/line.ico); }

I don't think any browsers provide an API for altering how the cursor looks - not yet anyway.

You could try drawing a custom cursor on the canvas, and maybe use the crosshair CSS cursor value and it might look okay.

There is an option to specify a URL as the cursor in CSS, which might work if you use a data URI with a generated image, but the support for it doesn't seem to be very great yet (see QuirksMode)