Hope you are all having a wonderful day..

so here's a thing i made a and online app with fabricjs and pdfjs " almost done", but i'm having some issues while drawing lines.. i'm using the latest version of FabricJS (5.2.1)

when i draw a line it will usefully draw with no issues, but when i try to select the draw line button an move the cursor around the canvas the previous drawing line stars following the cursor!! can anyone help me with this issue?

Also below there's further info about the app link, Line Drawing code, error and what i wanted to be

My issue: https://gfycat.com/harshspotlesscollie

This is what I'm trying to do: http://jsfiddle.net/vmachan/L10ren1q/

Draw Line Code (Found in viewer.js file: line 110):

$(".tool-button").on("click", function () {
      $(".tool-button").removeClass("active");
      $(this).addClass("active");
      const addLine = () => {
        if ($("#addLine").hasClass("active")) {
          mode="draw";
          isDown = true;
          canvas.on("mouse:down", function (o) {
            var pointer = canvas.getPointer(o.e);
            var points = [ pointer.x, pointer.y, pointer.x, pointer.y ];
            line = new fabric.Line(points, {
              strokeWidth: 5,
              fill: 'black',
              stroke: 'black',
              originX: 'center',
              originY: 'center',
              ObjectId: "id" + Math.random().toString(16).slice(2),
            });
            canvas.add(line);
            canvas.renderAll();
          });
          canvas.on('mouse:move', function(o){
            if (!isDown) return;
            if(mode=="draw"){
              var pointer = canvas.getPointer(o.e);
              line.set({ x2: pointer.x, y2: pointer.y });
              canvas.renderAll(); 
            }
          });
          
          canvas.on('mouse:up', function(){
            $(".tool-button").removeClass("active");
            isDown = false;
            canvas.selection=false;
          });
      };
      addLine();
    });