Fabric.js - Set cursor to free drawing brush size and colour

Question

Say I have a round solid brush with a size of 10, how can I change the cursor to indicate to the user that's what will be drawn on the canvas?

I see these is an option for a freeDrawingCursor, but that's for regular cursors, e.g. Crosshair or pointer.

Any ideas?

Answer 1

checking this:

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

It looks like you can define a cursor with a png file.

You could create a small temporary canvas of the size of cursor, paint over it with the brush, export as a png dataurl and use as a cursor.

When the user on your web app select a cursor width: - create an offscreen canvas of width and height of brush size - draw a circle of selected width and color - export canvas to dataurl - create an image of width and height of brush size, use dataurl as image source - on image loaded set that as your mouse cursor.