Fabric JS Custom cursor style

Question

I need to change the cursor types as "Handwriting" on hover shapes...

var canvas = window._canvas = new fabric.Canvas('ImgCanvas');
function changeCursor(cursorType) {
canvas.defaultCursor = "Handwriting";
}

I tried this but not working

Answer 1

You can change the hoverCursor directly to the single shape, or globally to the entire canvas. Take a look to the snippet below.

var canvas = this.__canvas = new fabric.Canvas('c');
// pointer for all
canvas.hoverCursor = 'pointer';

var rect = new fabric.Rect({
  left: 50,
  top: 30,
  width: 100,
  height: 100,
  fill: 'green',
  angle: 20,
});
var rect2 = new fabric.Rect({
  left: 180,
  top: 30,
  width: 100,
  height: 100,
  fill: 'green',
  angle: 20,
});
canvas.add(rect);
canvas.add(rect2);
canvas.renderAll();

var canvas2 = this.__canvas = new fabric.Canvas('c2');
var rect = new fabric.Rect({
  left: 120,
  top: 30,
  width: 100,
  height: 100,
  fill: 'green',
  angle: 20,
  // pointer for the selected shape
  hoverCursor: "pointer"
});
canvas2.add(rect);
canvas2.renderAll();

p{font-family:'arial'}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>

<p>Applied Globally</p>
<canvas height=200 width=300 id="c" style="border:1px solid black"></canvas>

<p>Applied individually</p>
<hr/>
<canvas height=200 width=300 id="c2" style="border:1px solid black"></canvas>

Answer 2

Surendhar,

To change cursor over the shape you need to defined as:

canvas.hoverCursor = 'cursor type'

This is a list of cursors

If you need custom cursor you have to create div element on top the fabric canvas with custom cursor. When you have event 'mouseover' the shape just specified canvas.hoverCursor = 'none', and show custom one.

You can check this fiddle it is simple example of custom cursor. You have to revisit this code in order to work without refreshing of custom cursor. It is all about mouse-over events of custom cursor. You have to disable mouse-over event of each div element of custom cursor.

Answer 3

For fabric 4.6, besides the default cursors, also be able to set custom cursor with png:

const canvas = new fabric.Canvas('c');

const cursorUrl = 'https://ossrs.net/wiki/images/figma-cursor.png';
canvas.defaultCursor = `url(" ${cursorUrl} "), auto`;
canvas.hoverCursor = `url(" ${cursorUrl} "), auto`; 
canvas.moveCursor = `url(" ${cursorUrl} "), auto`;  

CodePen