.onchange = (e) => {
  if (recording) return;

  const f = file.files?.[0];
  if (!f) return;
  const url = URL.createObjectURL(f);
  const img = new Image();

  img.onload = async function() {
    URL.revokeObjectURL(img.src);

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    const scale = Math.min(canvas.width / img.width, canvas.height / img.height);
    const w = img.width * scale;
    const h = img.height * scale;
    ctx.drawImage(img, (canvas.width - w) / 2, (canvas.height - h) / 2, w, h);
