Changing mouse icon thru javascript

Question

I am developing paintbrush application in javasript using Canvas Object. I want to change my own mouse cursor when the mouse pointer comes inside Canvas object. How to load my own icon?

Answer 1

This can be accomplished in CSS.

canvas {
    cursor: url(cursor.cur), url(cursor.gif), auto;
}

IE, Firefox, Safari, and Chrome will use the .cur file. The GIF (or use a PNG) is intended for browsers that don’t support the .cur file (not sure if there are any like this). Opera does not support custom cursors.

The size of the image must be 32x32 pixels or lower. This is a (Windows) OS restriction; not a browser restriction.

Reference - Quirksmode CSS compatibility tables http://www.quirksmode.org/css/cursor.html