Question

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.

Thanks.

Answer 1

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