Как сделать простую рисовалку на canvas — рисовать мышкой по странице?

Рисовалка строится на трёх событиях мыши: нажал (mousedown) — начали рисовать, двигаешь (mousemove) — рисуем линию, отпустил (mouseup) — перестали. Вот минимальная рабочая версия:

<canvas id="c" width="500" height="400" style="border:1px solid #000"></canvas>

<script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
let drawing = false;

canvas.addEventListener('mousedown', () => { drawing = true; ctx.beginPath(); });
canvas.addEventListener('mouseup',   () => { drawing = false; });
canvas.addEventListener('mousemove', (e) => {
  if (!drawing) return;
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
});
</script>

Логика: пока кнопка зажата (drawing === true), на каждое движение мыши тянем линию к новой точке (e.offsetX, e.offsetY) и рисуем stroke(). getContext('2d') — это «кисть», которой ты рисуешь по canvas.

Когда заработает — добавь выбор цвета (ctx.strokeStyle) и толщину (ctx.lineWidth), а потом кнопку «очистить» через ctx.clearRect.