Display pointer cursor when hovering paperjs item

Question

I would like the mouse cursor to be a pointer when hovering a Paper.js item.
I have found nothing allowing this in the documentation.
Is that possible ?

Answer 1

It is possible by setting the CSS cursor property of the canvas element.
You can set it to pointer when mouse enter the item and set it back to default when mouse leave the item.

Here is a sketch demonstrating the solution.

// draw a circle
new Path.Circle({
    center: view.center,
    radius: 50,
    fillColor: 'orange',
    // on mouse enter...
    onMouseEnter: function() {
        // ...set canvas cursor to pointer
        view.element.style.setProperty('cursor', 'pointer');
    },
    // on mouse leave...
    onMouseLeave: function() {
        // ...set canvas cursor to default
        view.element.style.setProperty('cursor', null);
    }
});

// display instruction
new PointText({
    content: 'Hover the circle to see the cursor change',
    point: view.center + [0, -80],
    justification: 'center'
});