Any reason you don't use lineTo to create a real drawing?

[MomasVII]

function drawLine(canvas, color, x, y, px, py) {
const context = canvas.getContext("2d");
context.beginPath();
context.moveTo(x, y);
context.lineTo(px, py);
context.stroke();
}

window.addEventListener(
"mousemove",
(event) => {
const { pageX: x, pageY: y } = event;
mouseCoordinates = { x, y };
mouseCoordinatespy = { px, py };

  if (mouseDown) {
    const color = colorHash.hex(dataTrack.id);
    //drawCircle(canvas, color, x, y);
    drawLine(canvas, color, x, y, px, py);

    dataTrack.send(
      JSON.stringify({
        mouseDown,
        mouseCoordinates,
        mouseCoordinatespy,
      })
    );
  }
  px = x;
  py = y;
},
false

);

track.on("message", (data) => {
const {
mouseDown,
mouseCoordinates: { x, y },
mouseCoordinatespy: { px, py },
} = JSON.parse(data);
if (mouseDown) {
drawLine(canvas, color, x, y, px, py);
}
});