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

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

• javascript
• css
• mouse-cursor

4 Answers 4

This can be acplished 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 patibility tables http://www.quirksmode/css/cursor.html

Do you have a .cur file for your own custom cursor?

You can have inside your Canvas object a style attribute that tells how the cursor should be shown as. This can be done through a custom css cursor

style="cursor: url(mycursor.cur);"

1. IE expects a .cur file.
2. Firefox requires a second, non-URL value; like cursor: url(pix/cursor_ppk.gif), auto.
3. The size of the image must be 32x32 pixels or lower. This is a (Windows) OS restriction; not a browser restriction.

Taken from CSS2 - Cursor styles, it is patible in IE5.5+, FF, Safari and Chrome. Opera and Konqueror 3.5.7 is not patible.

There is a way: http://beradrian.wordpress./2008/01/08/cross-browser-custom-css-cursors/ Dose not work with Opera, but fine for IE, FF, Safari, Chrome.

I posted workaround for opera using js here: Opera and Custom cursor in CSS