title: Signature Pad ToDataURL not working for complex signatures
body: <p>I am using the Signature pad made by szimek (<a href="https://github.com/szimek/signature_pad" rel="nofollow noreferrer">https://github.com/szimek/signature_pad</a>), which I have no issues with in getting the dataURL.</p>
  <p><a href="https://i.stack.imgur.com/28xog.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/28xog.png" alt="enter image description here" /></a></p>
  <p>However, when i draw plenty of lines onto the canvas, the URL returned by toDataURL() results in a an error indicating that the site cant be reached
  <a href="https://i.stack.imgur.com/hzacy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hzacy.png" alt="enter image description here" /></a></p>
  <p>Can someone please point me in the right direction? What could possibly have been done wrongly</p>
  <p>---EDIT---
  After following the suggestion made by @Sourabh Kumar</p>
  <pre><code>var signatureDataURL = objOfSignaturePads[manual_ticket_id].toDataURL('image/jpeg');
  </code></pre>
  <p>I can now access the data url without running into any errors however the signatures are cut off with a grey area appended below</p>
  <p><a href="https://i.stack.imgur.com/s0y0E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/s0y0E.png" alt="enter image description here" /></a></p>
  <p>Code</p>
  <pre><code>var fd = new FormData();
  
  function getTicketFieldDataForSubmission(manual_ticket_id, fd){
      $( &quot;#manual-complexform-fields-container&quot;+manual_ticket_id ).children('textarea,select,input,.m-signature-pad').each(function (index, ele) {
          // if(jQuery(ele).attr('type')!='file'){
          //     console.log(&quot;MADE IN IN HERE123&quot;);
          //     console.log(jQuery(ele));
          //     fd.append(jQuery(ele).attr('name'),jQuery(ele).val());
          // }
          if(jQuery(ele).attr('class')=='m-signature-pad'){
              console.log('FOUND M SIGNATURE PAD');
              if(objOfSignaturePads.hasOwnProperty(manual_ticket_id)) {
                  console.log(manual_ticket_id);
                  console.log(objOfSignaturePads);
                  var signatureDataURL = objOfSignaturePads[manual_ticket_id].toDataURL('image/png');
                  fd.append('signature_data',signatureDataURL);
              }
          }
          else{
              fd.append(jQuery(ele).attr('name'),jQuery(ele).val());
          }
           });
  enter code here
  </code></pre>