How to use signature_pad - 10 common examples

.then( () => {
                that.pad = new SignaturePad( canvas, {
                    onEnd: () => {
                        // keep replacing this timer so continuous drawing
                        // doesn't update the value after every stroke.
                        clearTimeout( that._updateWithDelay );
                        that._updateWithDelay = setTimeout( that._updateValue.bind( that ), DELAY );
                    },
                    penColor: that.props.colors[ 0 ] || 'black'
                } );
                that.pad.off();
                if ( existingFilename ) {
                    that.element.value = existingFilename;
                    return that._loadFileIntoPad( existingFilename )
                        .then( that._updateDownloadLink.bind( that ) );
                }
                return true;
            } );

attach(element) {
    this.loadRefs(element, { canvas: 'single', refresh: 'single', padBody: 'single', signatureImage: 'single' });
    const superAttach = super.attach(element);

    this.onDisabled();
    // Create the signature pad.
    if (this.refs.canvas) {
      this.signaturePad = new SignaturePad(this.refs.canvas, {
        minWidth: this.component.minWidth,
        maxWidth: this.component.maxWidth,
        penColor: this.component.penColor,
        backgroundColor: this.component.backgroundColor
      });

      this.signaturePad.onEnd = () => this.setValue(this.signaturePad.toDataURL(), {
        noSign: true
      });
      this.refs.signatureImage.setAttribute('src', this.signaturePad.toDataURL());

      // Ensure the signature is always the size of its container.
      if (this.refs.padBody) {
        this.addEventListener(window, 'resize', _.debounce(() => this.checkSize(), 100));
        setTimeout(function checkWidth() {
          if (this.refs.padBody && this.refs.padBody.offsetWidth) {

ready() {
   super.ready();
   this.t = {
     accept: t('accept'),
     clear: t('clear')
   }
   const canvas = this.shadowRoot.querySelector("#signature-pad-canvas");
   this.signaturePad = new SignaturePad(canvas, {
     backgroundColor: 'rgb(255, 255, 255)'
   });
   this.shadowRoot.querySelector('.hint-text').innerHTML = this.hasAttribute('hint-text') 
    ? this.getAttribute('hint-text')
    : ''
  }

componentDidMount() {
        if (this._canvas) {
            if (!this.props.width || !this.props.height) {
                this._canvas.style.width = '100%';
            }
            this.scaleCanvas();

            if (!this.props.width || !this.props.height) {
                window.addEventListener('resize', this._callResizeHandler);
            }

            this._signaturePad = new SigPad(this._canvas, this.props.options);
        }
    }

afterRender: function(question, el) {
      var rootWidget = this;
      var canvas = el.getElementsByTagName("canvas")[0];
      var buttonEl = el.getElementsByTagName("button")[0];
      var signaturePad = new SignaturePad(canvas);
      if (question.isReadOnly) {
        signaturePad.off();
      }

      buttonEl.onclick = function() {
        question.value = undefined;
      };

      question.readOnlyChangedCallback = function() {
        if (!question.allowClear || question.isReadOnly) {
          signaturePad.off();
          buttonEl.style.display = "none";
        } else {
          signaturePad.on();
          buttonEl.style.display = "block";
        }

import dialog from 'enketo/dialog';
import { updateDownloadLink, dataUriToBlobSync, getFilename } from '../../js/utils';
const DELAY = 1500;

/**
 * SignaturePad.prototype.fromDataURL is asynchronous and does not return
 * a Promise. This is a rewrite returning a promise and the objectUrl.
 * In addition it also fixes a bug where a loaded image is stretched to fit
 * the canvas.
 *
 * @function external:SignaturePad#fromObjectURL
 * @param {*} objectUrl
 * @param {*} options
 * @return {Promise}
 */
SignaturePad.prototype.fromObjectURL = function( objectUrl, options ) {
    const image = new Image();
    options = options || {};
    const deviceRatio = options.ratio || window.devicePixelRatio || 1;
    const width = options.width || ( this._canvas.width / deviceRatio );
    const height = options.height || ( this._canvas.height / deviceRatio );
    const that = this;

    this._reset();

    return new Promise( resolve => {
        image.src = objectUrl;
        image.onload = () => {
            const imgWidth = image.width;
            const imgHeight = image.height;
            const hRatio = width / imgWidth;
            const vRatio = height / imgHeight;

that._ctx.drawImage( image, left, top, imgWidth, imgHeight );
            }
            resolve( objectUrl );
        };
        that._isEmpty = false;
    } );
};

/**
 * Similar to SignaturePad.prototype.fromData except that it doesn't clear the canvas.
 * This is to facilitate undoing a drawing stroke over a background (bitmap) image.
 *
 * @function external:SignaturePad#updateData
 * @param {*} pointGroups
 */
SignaturePad.prototype.updateData = function( pointGroups ) {
    const that = this;
    this._fromData(
        pointGroups,
        ( curve, widths ) => { that._drawCurve( curve, widths.start, widths.end ); },
        rawPoint => { that._drawDot( rawPoint ); }
    );

    this._data = pointGroups;
};

/**
 * Widget to obtain user-provided drawings or signature.
 *
 * @extends Widget
 */
class DrawWidget extends Widget {