I'm building a drawing app, and I want a cursor in form of circle. I searched HTML5 style to make cursor default, pointer etc, but I need it to be a circle. How can I do this?

I'm building a drawing app, and I want a cursor in form of circle. I searched HTML5 style to make cursor default, pointer etc, but I need it to be a circle. How can I do this?

• javascript
• html
• css
• html5-canvas

4 Answers 4

What you want can be done by CSS.

Check out the following snippet and this jsfiddle

#circle64 {
  cursor: url('http://www.iconsdownload/icons/64/16574-black-circle.png'), pointer;
}
#circle32 {
  cursor: url('http://www.iconsdownload/icons/32/16574-black-circle.png'), pointer;
}
#circle24 {
  cursor: url('http://www.iconsdownload/icons/24/16574-black-circle.png'), pointer;
}

<div id='circle64'>
  Cursor will
  <br>be</br>different here.
</div>
<br>
<br>
<br>
<div id='circle32'>
  Cursor will
  <br>be</br>different here.
</div>
<br>
<br>
<br>
<div id='circle24'>
  Cursor will
  <br>be</br>different here.
</div>

you can use an image as cursor, by using this css property

cursor: url(images/my-cursor.png), auto;

for example if you have some input and you want to show round cursor on it , you should use png image

input{
cursor: url(images/my-cursor.png), auto;
}

check this jsfiddle http://jsfiddle/pwy51Ly8/

From this link "It wasn't working because your image was too big - there are restrictions on the image dimensions. In Firefox, for example, the size limit is 128x128px"

You can use CSS cursor wait

div {
    cursor: wait;
}

or

div {
 cursor: url("your custom cursor image"), auto;
}