javascripthtmlhtml5-canvasfabricjs

Fabric JS Custom cursor style

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

Solution

  • 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://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.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>