StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCustom cursor not working correctly in Chrome
text
Body
copied!<p>I'm having trouble getting chrome to display my custom cursor correctly but it seems to work as intended in FireFox. </p> <p>To give a little context, as part of my attempt to get up to speed with HMLT5/Javascript I'm putting together a mini shooting game using the new canvas element and I'm using a custom scope-like cursor I created with Axialis Cursor Workshop and here's the html and css for the canvas:</p> <pre><code><canvas id="canvas" class="block" width="800" height="700" onSelectStart="this.style.cursor='url(cursors/scope.cur), crosshair'; return false;"/> #canvas { cursor: url(../cursors/scope.cur), crosshair; background: url(../images/canvas_background.jpg); } </code></pre> <p>In chrome, I see a warning saying "<em>Resource interpreted as image but transferred with MIME type application/octet-stream.</em>" in relation to the <em>scope.cur</em> file. When I move my mouse to the top left corner of the canvas area I can see the cursor is drawn but the 'hot spot' of cursor is not at the center of the cursor.</p> <p>In firefox, this works with no problem, I can still see the same cursor and the 'hot spot' of the cursor is at its center as I intended.</p> <p>Any idea what I'm doing wrong here and how can I fix it for chrome? The standard <em>crosshair</em> cursor works fine in chrome (in that its 'hot spot' is positioned correctly) but it doesn't quite fit my purpose here.</p> <p>You can see for yourself <a href="http://www.theburningmonk.com/demos/shooting%20target/part%202/shooting_target_demo_part_2.html" rel="nofollow">here</a>, just move the cursor to the top left corner in chrome and firefox to see the difference.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload