Forms

Signature pad

Sign with a mouse, a finger or a pen. The drawing goes into a form field as a picture.

Draw your signature

Sign above the line

HTML

<div class="pw-signature" data-pw-signature data-name="signature" id="demo-sign" style="max-width:480px">
  <canvas></canvas>
  <div class="pw-signature-bar">
    <span class="pw-hint">Sign above the line</span>
    <button type="button" class="pw-btn pw-btn--sm" data-signature-undo>Undo</button>
    <button type="button" class="pw-btn pw-btn--sm" data-signature-clear>Clear</button>
  </div>
</div>
<p class="demo-out" id="demo-sign-out"></p>

JavaScript

document.getElementById('demo-sign').addEventListener('pw:change', function (e) {
  var pad = Partwise.get(this, 'signature');
  document.getElementById('demo-sign-out').textContent = e.detail.empty ? '' : 'Saved as a PNG of ' + Math.round(pad.toDataURL().length / 1024) + ' KB (text length).';
});

Options

Set them as attributes on the element.

Attribute	Default	What it does
`data-name`		Name of the hidden field that receives the picture (a PNG as a data URL).
`data-color`	`#14161b`	Ink colour.
`data-width`	`2.2`	Line width.
`data-background`		A colour behind the ink in the saved picture. Without it the PNG is see-through.

Events

Listen with addEventListener. Details are in event.detail.

Event	When
`pw:change`	After each stroke, undo or clear, with `empty`.

From your script

var s = Partwise.get('#demo-sign', 'signature');
s.isEmpty;
s.toDataURL();              // PNG; toDataURL('image/jpeg', 0.9) needs data-background
s.toSVG();                  // the lines as an SVG text
s.undo(); s.clear();
s.load(s.strokes);          // draw saved strokes again

Good to know

The lines stay sharp on high-resolution screens and are drawn again when the pad changes size.
Drawing needs a pointer. For people who cannot draw, offer a second way, such as a field to type the name.
A drawn signature is a picture. Whether it counts legally depends on your country and your use.

Files

Everything is in dist/partwise.css and dist/partwise.js. To load only this component, use src/css/00-base.css and src/js/00-core.js plus: css/50-more.css, js/50-more.js.