<canvas></canvas>

canvas {
  background-color: #FFECB3;
}

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

let drawing = false;
let x = 0;
let y = 0;

function startDrawing(e) {
  drawing = true;
  x = e.offsetX;
  y = e.offsetY;
}

function draw(e) {
  if (!drawing) return;

  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();

  x = e.offsetX;
  y = e.offsetY;
}

function stopDrawing() {
  drawing = false;
}

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);