title: Can't check if signature pad is empty or not
body: <p>I've a problem with my signature pad. When I press the submit button without sign the pad, I'll throw an error but I'm getting this error:</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: signaturePad is not defined</p>
  </blockquote>
  
  <p>This is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(document).ready(function () {
    var signaturePadCanvas = document.querySelector('#signature-pad-canvas');
    var parentWidth = jQuery(signaturePadCanvas).parent().outerWidth();
    signaturePadCanvas.setAttribute("width", parentWidth);
    var signaturePad = new SignaturePad(signaturePadCanvas);
  });
  
  function submit() {
    if (signaturePad.isEmpty()) {
      console.log("Empty!");
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.signature-pad-canvas-wrapper {
      margin: 15px 0 0;
      border: 1px solid #cbcbcb;
      border-radius: 3px;
      overflow: hidden;
      position: relative;
  }
  
  .signature-pad-canvas-wrapper::after {
      content: 'Name';
      border-top: 1px solid #cbcbcb;
      color: #cbcbcb;
      width: 100%;
      margin: 0 15px;
      display: inline-flex;
      position: absolute;
      bottom: 10px;
      font-size: 13px;
      z-index: -1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"&gt;&lt;/script&gt;
  &lt;div class="signature-pad-canvas-wrapper"&gt;
      &lt;canvas id="signature-pad-canvas"&gt;&lt;/canvas&gt;
      &lt;button onClick="submit()"&gt;Submit&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any ideas?</p>