---

<canvas id="c" width="600" height="400" style="border:1px solid #000"></canvas>
<script>
const c = document.getElementById('c');
const ctx = c.getContext('2d');
let drawing = false;

c.addEventListener('mousedown', e => {
  drawing = true;
  ctx.beginPath();
  ctx.moveTo(e.offsetX, e.offsetY);
});

c.addEventListener('mousemove', e => {
  if (!drawing) return;
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
});

window.addEventListener('mouseup', () => drawing = false);
</script>