Question

I’m having trouble getting chrome to display my custom cursor correctly but it seems to work as intended in FireFox.

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:

<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);
}

In chrome, I see a warning saying “Resource interpreted as image but transferred with MIME type application/octet-stream.” in relation to the scope.cur 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.

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.

Any idea what I’m doing wrong here and how can I fix it for chrome? The standard crosshair cursor works fine in chrome (in that its ‘hot spot’ is positioned correctly) but it doesn’t quite fit my purpose here.

You can see for yourself here, just move the cursor to the top left corner in chrome and firefox to see the difference.

Answer 1

For anyone interested, I solved this problem in the end though it’s a bit of a hack.

I first tried using a blank cursor but then Chrome renders that as a black square.. so I decided to draw the target as part of the canvas and use a cursor which has hotspot at 0, 0 and is blank EXCEPT the 0, 0 tile which has the same colour as the target.

You can see the result here once you start the game, it’s not a pretty solution, but works nonetheless.