happy new year, dear colleagues! My goal is to create an app that logs the free drawing position using fabric.js in the console.log. Here is my application code:
var canvas = new fabric.Canvas(document.getElementById('canvasId'));
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.width = 5;
canvas.freeDrawingBrush.color = '#00aeff';
canvas.on('path:created', function(e)
{
e.path.set();
canvas.renderAll();
console.log(JSON.stringify(canvas));
});
canvas
{
border: 1px solid red;
}
<canvas id="canvasId" width="600" height="600"></canvas>
<script src="https://unpkg.com/fabric@4.6.0/dist/fabric.js"></script>
the main problem is that this drawing is entered into the console only at the moment when the finger is lifted from the mouse button. As a result, in the case of using socket.io, you can observe the appearance of trailing lines. I do not need to enter data as json throughout the entire work with the mouse, so that the movement is transmitted without delays. How to solve this problem?