Canvas Draw

HTML

<html>
<head>
<title>Canvas Draw</title>
</head>
<body>
<div class="fade">
  <div class="container-canvas"></div>
    </div>
</body>
</html>

CSS

.fade{
  display: flex;
  position: fixed;
  top: 0;
  height: 100vh;
  align-items:center;
  justify-content:center;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
}
.container-canvas{
  border: 1px solid red; 
}
.canvas{
  background-color:white;
}

JavaScript

const canvas = document.createElement("canvas");
      canvas.setAttribute("id", "canvas");
      canvas.setAttribute("class", "canvas");

      const context = canvas.getContext("2d");

      canvas.width = 200;
      canvas.height = 200;

      context.lineWidth = 4;
      context.strokeStyle = "red";
      const brush = {
        active: false,
        move: false,
        pos: { x: 0, y: 0 },
        posPrev: null,
      };

      const drawLine = (line) => {
        context.beginPath();
        context.moveTo(line.posPrev.x, line.posPrev.y);
        context.lineTo(line.pos.x, line.pos.y);
        context.stroke();
      };

      canvas.onmousedown = () => {
        brush.active = true;
      };
      canvas.onmouseup = () => {
        brush.active = false;
      };
      canvas.onmousemove = (event) => {
        brush.pos.x = event.clientX;
        brush.pos.y = event.clientY;
        brush.move = true;
      };

      const loop = () => {
        if (brush.active && brush.move && brush.posPrev) {
          drawLine({ pos: brush.pos, posPrev: brush.posPrev });
          brush.move = false;
        }
        brush.posPrev = { x: brush.pos.x, y: brush.pos.y };
        setTimeout(loop, 10);
      };
      loop();

     document.querySelector(".container-canvas").appendChild(canvas);