Fabric.js - how to use custom cursors without drawing mode

Question

I have no idea how to set up cursor image for drawing on the Canvas. I have noticed that I can set it only when

FABRICCANVAS.isDrawingMode = true;

However, the problem is that I have created dedicated drawing tools and I don't want to use those that are built into the Fabric.js.

Sample of my code (which doesn't work properly):

const FABRICCANVAS = new fabric.Canvas('canvas-draft');
const DRAFT = document.querySelector(".upper-canvas");
button.addEventListener('click', () => {
    DRAFT.style.cursor = 'url(img/cursors/image.png) 0 34, auto';
});

But when I set isDrawingMode to true, it works. Unfortunately, I don't want to use built-in drawing tools because they leave paths (that can then be moved later, when FABRICCANVAS.selection = true ).

Do you know any solution for this problem?

Answer 1

For the Canvas you can set different cursors:

eg

canvas.hoverCursor
canvas.defaultCursor
canvas.moveCursor

You can use absolute or relative paths to your cursor image:

canvas.moveCursor = 'url("...") 10 10, crosshair';