CODEWITHSUNDEEP
javascriptcanvascursor
Markus Finell
Markus Finell

Reputation: 336

Set cursor origin on custom JS-cursor

I have a js-function that creates a custom cursor in the shape of a cross/X when I hover over an image. Looks like this:

function makeCursor() {

    var cursor = document.createElement('canvas'),
        ctx = cursor.getContext('2d');

    cursor.width = 20;
    cursor.height = 20;

    ctx.strokeStyle = '#b89552';

    ctx.lineWidth = 3;
    ctx.lineCap = 'round';

    ctx.moveTo(0, 20);
    ctx.lineTo(20, 0);
    ctx.moveTo(0, 0);
    ctx.lineTo(20, 20)    
    ctx.stroke();

    var aboveimage = document.getElementsByClassName("aboveimage");
    for(i=0;i<aboveimage.length;i++){
        aboveimage[i].style.cursor = 'url(' + cursor.toDataURL() + '), auto';
    }

}

The problem is that the center of the cross is not positioned at the point of the cursor. I tried changing the "moveTo" and "lineTo" to -10 instead of 0 and 10 instead of 20. but that just moved the cross outside of the viewable 20x20px area. How do I move the actual area of the custom cursor so that the center of the cross is at the point of the cursor?

Upvotes: 1

Views: 113

Answers (1)

epascarello
epascarello

Reputation: 207501

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

Set the x and y position to the values you need.

...cursor =  'url(...) x y, auto';

Upvotes: 2

Related Questions