I am attempting to make a whiteboard using fabric.js and socket.io. It works, but after drawing one line, it stops working. I believe that it is looping in the socket.on function and that is causing it to keep adding the same object over and over but I am not sure how to address that.

(function() {
  var socket = io();
  var myid = 0;
  var $ = function(id){return document.getElementById(id)};

  var canvas = this.__canvas = new fabric.Canvas('c', {
    isDrawingMode: true
  });
  var now_color="black";
  var now_width = 1;

  fabric.Object.prototype.transparentCorners = false;

  var drawingModeEl = $('drawing-mode'),
      drawingOptionsEl = $('drawing-mode-options'),
      drawingColorEl = $('drawing-color'),
      drawingLineWidthEl = $('drawing-line-width'),
      clearEl = $('clear-canvas');
      eraseModeEl = $('erase-mode');
      selmode = $('select');
      ermode = $('erase');
      dmode = $('draw');

socket.on('draw', function(path) {
  fabric.util.enlivenObjects([path], function(objects) {
      canvas.add(objects[0]);
  });
});

selmode.onclick = function() {
    select.classList.remove('active');erase.classList.remove('active');draw.classList.remove('active');
    select.classList.add('active');
    canvas.isDrawingMode = false;
}
    
ermode.onclick = function() {
    select.classList.remove('active');erase.classList.remove('active');draw.classList.remove('active');
    erase.classList.add('active');
    canvas.isDrawingMode = true;
    canvas.freeDrawingBrush = new fabric.EraserBrush(canvas);
    canvas.freeDrawingBrush.width = now_width;
}
    
dmode.onclick = function() {
    select.classList.remove('active');erase.classList.remove('active');draw.classList.remove('active');
    draw.classList.add('active');
    canvas.isDrawingMode = true;
    canvas.freeDrawingBrush = new fabric.PencilBrush(canvas);
    canvas.freeDrawingBrush.width = now_width;
    canvas.freeDrawingBrush.color = now_color;
}

var canvasModifiedCallback = function() {

canvas.setActiveObject(canvas.item(myid));
    var what = canvas.getActiveObject();
    socket.emit('draw', what);
    myid++;
    canvas.discardActiveObject();
};

canvas.on('object:added', canvasModifiedCallback);
})();