Emulate free drawing with fabricjs

Question

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 time. I use fabricjs as canvas wrapper and it has everithing I need. But I can't emulate free drawing on canvas. I send mouse position and brush options to remote client and try to render them by firing mouse move events. But it don't work. If some body has simialiar problem can you please help?

canvasContainer.on('mousemove', function (e) {      
    var left = canvasContainer.offset().left;
    var top = canvasContainer.offset().top;
    var x = e.pageX - left;
    var y = e.pageY - top;         
    //Send data to remote browser by socket.io or signalr
    //I need to draw on remote browser by these x and y coordinates.
    updateCursor(_connections, x, y);
});

Have you tried passing the event from mouse move and then using canvas.trigger to fire the event on the target canvas? — Ben, Nov 15 '16 at 00:57
yes. I tried it. But I can't serialize event object to json to send it. — Radislav, Nov 15 '16 at 08:36
TypeError: Converting circular structure to JSON. But event if I serialize it how can I trigger event in another browser? — Radislav, Nov 16 '16 at 13:03

janusz · Accepted Answer · 2016-11-16T08:06:00.697

6

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);

edited Nov 16 '16 at 08:06

answered Nov 16 '16 at 07:58

janusz

828
6
9

Thanks for your reply! I will try and let you know. – Radislav Nov 16 '16 at 13:04
2

It would probably make sense to call brush.onMouseUp(x,y) as well. So I guess you should just send the type of event (mousedown, mousemove, mouseup) along with x & y coordinates to your socket.io clients and call corresponding methods from `brush`. – janusz Nov 16 '16 at 13:40
Yes it works. But it begin to come slow after 10-20 sec of drawing. And monitor performance show cpu consumption... Do you know why? – Radislav Nov 16 '16 at 14:29
It's hard to guess not seeing the code. Does the number of points in the rendered path affect the performance? Or it just happens after 10-20 seconds no matter how complex the path is? – janusz Nov 16 '16 at 14:36
Awesome :-) Good luck with this project. – janusz Nov 16 '16 at 16:37

Emulate free drawing with fabricjs

1 Answers1

Linked