<span class="not-proccess">То что будет перекрывать канвас</span>
<button class="not-proccess">Кнопка</button>
<canvas id="canvas"></canvas>

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#canvas {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
}

const path = [
  { x: 0, y: 0 },
  { x: 0, y: 0 }
];
let isDrawing = false;

document.addEventListener("DOMContentLoaded", () => {
  const canvas = document.getElementById("canvas");

  document.addEventListener("mousedown", (e) => {
    if (e.target.classList.contains('not-proccess')) return;
    
    e.preventDefault();
    path[0] = { x: e.pageX, y: e.pageY };
    isDrawing = true;
  });

  document.addEventListener("mouseup", (e) => {
    e.preventDefault();
    isDrawing = false;
  });

  document.addEventListener("mousemove", (e) => {
    if (!isDrawing) return;
    
    e.preventDefault();
    path[1] = { x: e.pageX, y: e.pageY };
    drawPath(path[0], path[1], "#409aec", 10);
  });
});

function drawPath(a, b, strokeStyle, lineWidth) {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  if (!a.x && !a.y && !b.x && !b.y) return;

  const ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(a.x, a.y);
  if (a.x === b.x || a.y === b.y) {
    ctx.lineTo(b.x, b.y);
  } else {
    ctx.lineTo((a.x + b.x) / 2, a.y);
    ctx.lineTo((a.x + b.x) / 2, b.y);
    ctx.lineTo(b.x, b.y);
  }
  ctx.strokeStyle = strokeStyle || "#000";
  ctx.lineWidth = lineWidth || 1;
  ctx.stroke();
  console.log("draw");
}