<bmx-signature-pad>

<form id="ex-sig-form">
  <bmx-signature-pad id="ex-sig" name="signature" label="Signature" description="Sign with a mouse, a finger or a pen, or choose Type to type your name." required></bmx-signature-pad>
  <div class="row" style="gap: 8px; margin-top: 12px; flex-wrap: wrap">
    <button type="submit">Send</button>
    <button type="reset">Reset</button>
    <button type="button" id="ex-sig-png">Save PNG</button>
    <button type="button" id="ex-sig-svg">Save SVG</button>
  </div>
</form>
<p class="note" id="ex-sig-out" role="status">Nothing is sent anywhere: the form's value is shown here instead.</p>
<p><img id="ex-sig-img" alt="" style="max-width: 100%; max-height: 90px; display: none" /></p>

<h3>Stored as strokes, drawn back</h3>

<p class="note">With <code>format="json"</code> the value is the strokes themselves; setting it draws them again. This one is read-only.</p>
<bmx-signature-pad id="ex-sig-ro" label="Signed by the account holder" readonly format="json" allow-typing="false" style="--bmx-signature-pad-height: 8rem"></bmx-signature-pad>

<script type="module">
  await customElements.whenDefined('bmx-signature-pad');
  const pad = document.getElementById('ex-sig');
  const out = document.getElementById('ex-sig-out');
  const img = document.getElementById('ex-sig-img');
  document.getElementById('ex-sig-form').addEventListener('submit', e => {
    e.preventDefault();
    const value = new FormData(e.target).get('signature');
    out.textContent = `The form would send a ${value.length.toLocaleString()}-character PNG data URL.`;
    img.src = value;
    img.style.display = 'block';
  });
  pad.addEventListener('bmxChange', e => (out.textContent = e.detail.empty ? 'Empty.' : `Signed (${e.detail.mode === 'type' ? 'typed' : 'drawn'}).`));
  document.getElementById('ex-sig-png').addEventListener('click', () => pad.download('png'));
  document.getElementById('ex-sig-svg').addEventListener('click', () => pad.download('svg'));

  // A signature drawn by a script: three loops and a long tail, as stored strokes.
  const strokes = [];
  const loops = [];
  for (let i = 0; i <= 120; i += 1) {
    const t = i * 0.16;
    loops.push([70 + i * 1.7 + Math.sin(t) * 26, 70 - Math.cos(t) * 30 + (i < 10 ? 10 - i : 0), 0, i * 7]);
  }
  strokes.push(loops);
  const tail = [];
  for (let i = 0; i <= 50; i += 1) tail.push([285 + i * 5, 92 - Math.sin(i / 6) * 16 - i * 0.5, 0, 1000 + i * (i < 25 ? 10 : 4)]);
  strokes.push(tail);
  strokes.push([[180, 40, 0, 1600], [184, 38, 0, 1612]]);
  document.getElementById('ex-sig-ro').value = JSON.stringify({ width: 560, height: 128, strokes });
</script>