CODEWITHSUNDEEP
canvashtml5-canvasfabricjs
user2587454
user2587454

Reputation: 913

change drawing cursor on canvas with fabric.js

i'm using fabric.js to make a drawing tool canvas. i want to change the cursor while i'm drawing so i'm using this:

canvas.freeDrawingCursor = 'url('icn_pencil.svg), auto';

this is working and i can see the image cursor.

my problem is that i need to change the image position because otherwise it looks like this:

enter image description here

Upvotes: 1

Views: 3139

Answers (1)

user1693593
user1693593

Reputation:

You can tell where the hit-point is by using coordinates right after the url:

canvas.freeDrawingCursor = 'url('icn_pencil.svg) x y, auto';

Replace x and y above with the offset values in pixels matching the image.

var ctx = c.getContext("2d");
c.onmousemove = function(e) {ctx.fillRect(e.clientX - 2, e.clientY - 2, 4, 4)};
html, body {margin:0}
#c {
  cursor: url(https://i.sstatic.net/fp7eL.png) 4 64, auto;
  background:#ddd;
  }
<canvas id=c width=600 height=600></canvas>

Upvotes: 6

Related Questions