Как рисовать линии в сетке с помощью мыши? [closed]

Мне нужен совет, как сделать событие и нарисовать линии мыши в сетке. Почему-то я не могу этого сделать, поэтому могу рисовать прямые линии в сетке. Но у меня все еще сетка, как исправить ошибку рисования не знаю. Я добавляю свой код Javascript ниже. Мое событие рисования мыши не работает, оно меня вообще не рисует.

Код JS для сетки:

;(function () {
        let canvas, ctx, mouse
      
        class Mouse {
          constructor (ctx, x = 0, y = 0) {
            this.x = x
            this.y = y
            this.ctx = ctx
          }
      
          set pos (evt) {
            const canvasDimensions = canvas.getBoundingClientRect()
      
            this.x = Math.floor(evt.clientX - canvasDimensions.left)
            this.y = Math.floor(evt.clientY - canvasDimensions.top)
      
            const { x, y, ctx } = this
            const txt = `X: ${x}, Y: ${y}`
      
            ctx.font="16px Poppins"
    
            const offsetX = x < canvas.width / 2 ? 15 : -ctx.measureText(txt).width - 15
            const offsetY = y < canvas.height / 2 ? 20 : -13
      
            ctx.fillText(txt, this.x + offsetX, this.y + offsetY)
          }
        }
      
        class Line {
          constructor (color, lineWidth, startX, startY, endX, endY) {
            this.color = color
            this.lineWidth = lineWidth
            this.startX = startX
            this.startY = startY
            this.endX = endX
            this.endY = endY
          }
      
          draw (ctx) {
            const { color, lineWidth, startX, startY, endX, endY } = this
      
            ctx.beginPath()
            ctx.strokeStyle = color
            ctx.lineWidth = lineWidth
            ctx.moveTo(startX, startY)
            ctx.lineTo(endX, endY)
            ctx.stroke()
          }
        }
      
        class Grid {
          constructor (
            color="black", lineWidth = 0.25, step = 25,
            boldNth = 5, boldColor="black", boldWidth = 0.25
          ) {
            this.color = color
            this.lineWidth = lineWidth
            this.step = step
            this.boldNth = boldNth
            this.boldColor = boldColor
            this.boldWidth = boldWidth
      
            this.lines = null
          }
      
          createLines () {
            const {
              color, lineWidth, step,
              boldNth, boldColor, boldWidth
            } = this
      
            const lines = []
      
            const div = boldNth * step
      
            for (let x = 0; x < canvas.width; x += step) {
              const isNth = x % div === 0
      
              lines.push(
                isNth
                  ? new Line(boldColor, boldWidth, x, 0, x, canvas.height)
                  : new Line(color, lineWidth, x, 0, x, canvas.height)
              )
            }
      
            for (let y = 0; y < canvas.height; y += step) {
              const isNth = y % div === 0
      
              lines.push(
                isNth
                  ? new Line(boldColor, boldWidth, 0, y, canvas.width, y)
                  : new Line(color, lineWidth, 0, y, canvas.width, y)
              )
            }
      
            this.lines = lines
          }
      
          drawText (ctx) {
            const { step, boldNth, boldColor } = this
      
            ctx.font="16px Poppins"
            ctx.fillStyle = boldColor
      
            ctx.fillText('0', 1, 15)
      
            for (let x = step * boldNth; x < canvas.width; x += step * boldNth) {
              ctx.fillText(x, x, 15)
            }
      
            for (let y = step * boldNth; y < canvas.height; y += step * boldNth) {
              ctx.fillText(y, 0, y + 15)
            }
          }
      
          draw (ctx) {
            if (!this.lines) this.createLines()
      
            this.lines.forEach(line => line.draw(ctx))
            this.drawText(ctx)
          }
        }
      
        function init () {
          canvas = document.getElementById('Canvas')
          ctx = canvas.getContext('2d')
          mouse = new Mouse(ctx)
      
          const grid = new Grid('black', 0.25, 50, 1)
      
          grid.draw(ctx)
      
          canvas.addEventListener('mousemove', (evt) => {
            ctx.clearRect(0, 0, canvas.width, canvas.height)
      
            grid.draw(ctx)
    
            mouse.pos = evt
          })
    
          canvas.addEventListener('mouse:down', function(o){
            isDown = true;
            var pointer = canvas.getPointer(o.e);
            var points = [ pointer.x, pointer.y, pointer.x, pointer.y ];
            line = new fabric.Line(points, {
            strokeWidth: 5,
            fill: 'red',
            stroke: 'red',
            originX: 'center',
            originY: 'center'
          });
        });
    
        canvas.addEventListener('mouse:move', function(o){
          if (!isDown) return;
          var pointer = canvas.getPointer(o.e);
          line.set({ x2: pointer.x, y2: pointer.y });
          canvas.renderAll();
          grid.draw(ctx)
          });
      
          canvas.on('mouse:up', function(o){
          isDown = false;
          grid.draw(ctx)
          });
    
        }
      
        document.addEventListener('DOMContentLoaded', init)
      })()