How to use the signature_pad function in signature_pad

.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;
            } );

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";
        }