How to change my mouse cursor when i hover over the canvas to a custom cursor?

Question

I have a .cur file and I want to use that cursor when my mouse is over the canvas ( I am using Google Chrome)

<body>
<canvas id="canvas" width="600" height="405" style="position:relative; background:        black;" onclick="newBall()">

</canvas>
</body>

possible duplicate of [Custom cursor graphic via jQuery.css()](http://stackoverflow.com/questions/6586828/custom-cursor-graphic-via-jquery-css) — Useless, Jan 22 '13 at 18:16
possible duplicate of [How can I make the cursor a hand when a user hovers over a list item?](http://stackoverflow.com/questions/3087975/how-can-i-make-the-cursor-a-hand-when-a-user-hovers-over-a-list-item) — Saurabh Chandra Patel, Jan 21 '15 at 07:12

score 2 · Accepted Answer · answered Jan 22 '13 at 13:38

Using CSS:

canvas { 
  cursor: url(myCursor.cur), default; 
}

or Inline:

style="cursor:url(myCursor.cur), default;"

Full Code:

<body>
<canvas id="canvas" 
        width="600" 
        height="405" 
        style="position:relative; 
               background:black;
               cursor: url(myCursor.cur), default;" 
        onclick="newBall()">
</canvas>
</body>

score 1 · Answer 2 · answered Jan 21 '15 at 07:09

1

#canvas {
cursor: url(images/cursor.png), auto;
}

answered Jan 21 '15 at 07:09

Saurabh Chandra Patel

12,712
6
88
78

How to change my mouse cursor when i hover over the canvas to a custom cursor?

2 Answers2