Skip to content Skip to sidebar Skip to footer

Emulate Free Drawing With Fabricjs

I am developing application which has whiteboard. Whiteboard should work like idroo.com. One user is drawing something another user should be able to see it on his browser in real

Solution 1:

You can do something like this:

var brush = new fabric.PencilBrush(canvas);
var points = [[10,10], [20,20], [25,70],[100,300]];

brush.onMouseDown({x:points[0][0], y:points[0][1]});
for(var i=1;i<points.length;i++) {
  brush.onMouseMove({x:points[i][0], y:points[i][1]});
}

See plunker here: https://plnkr.co/edit/V1c1xkB29tgB2ha99CRQ?p=preview

You can simplify your code for calculating x and coordinates and do it like this:

var point = canvas.getPointer(e);

Post a Comment for "Emulate Free Drawing With Fabricjs"