Building an Interactive Digital Signature & Sketch Pad (Canvas Mouse & Touch Events)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BCA Day 43 - Signature Studio</title>
  <style>
    body { font-family: "Segoe UI", sans-serif; background: #060c18; color: #fff; padding: 24px; text-align: center; }
    .card { background: #0c1328; border: 1px solid #1e293b; padding: 24px; border-radius: 12px; max-width: 550px; margin: auto; }
    canvas { background: #ffffff; border-radius: 8px; cursor: crosshair; touch-action: none; border: 2px dashed #38bdf8; }
    .toolbar { display: flex; justify-content: center; gap: 8px; align-items: center; margin: 16px 0; }
    button { padding: 8px 16px; border-radius: 6px; font-weight: bold; border: none; cursor: pointer; }
    .btn-action { background: #2563eb; color: #fff; }
  </style>
</head>
<body>
  <div class="card">
    <h2>✍️ Student Verification Signature Pad</h2>
    <canvas id="sigCanvas" width="480" height="220"></canvas>
    <div class="toolbar">
      <input type="color" id="strokeColor" value="#000000" />
      <input type="range" id="strokeWidth" min="1" max="8" value="2" />
      <button id="clearBtn" style="background:#dc2626;color:#fff;">Clear</button>
      <button id="confirmBtn" class="btn-action">Download PNG</button>
    </div>
  </div>

  <script>
    const canvas = document.getElementById("sigCanvas");
    const ctx = canvas.getContext("2d");
    let isDrawing = false;
    ctx.lineCap = "round";
    ctx.lineJoin = "round";

    function getPos(e) {
      const r = canvas.getBoundingClientRect();
      return { x: e.clientX - r.left, y: e.clientY - r.top };
    }

    canvas.addEventListener("mousedown", (e) => {
      isDrawing = true;
      const pos = getPos(e);
      ctx.beginPath();
      ctx.moveTo(pos.x, pos.y);
    });

    canvas.addEventListener("mousemove", (e) => {
      if (!isDrawing) return;
      const pos = getPos(e);
      ctx.strokeStyle = document.getElementById("strokeColor").value;
      ctx.lineWidth = document.getElementById("strokeWidth").value;
      ctx.lineTo(pos.x, pos.y);
      ctx.stroke();
    });

    window.addEventListener("mouseup", () => { isDrawing = false; });
    document.getElementById("clearBtn").addEventListener("click", () => ctx.clearRect(0, 0, canvas.width, canvas.height));
    document.getElementById("confirmBtn").addEventListener("click", () => {
      const a = document.createElement("a");
      a.href = canvas.toDataURL("image/png");
      a.download = "bca-signature.png";
      a.click();
    });
  </script>
</body>
</html>