I am using the Signature pad made by szimek (https://github.com/szimek/signature_pad), which I have no issues with in getting the dataURL.

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

Can someone please point me in the right direction? What could possibly have been done wrongly

---EDIT--- After following the suggestion made by @Sourabh Kumar

var signatureDataURL = objOfSignaturePads[manual_ticket_id].toDataURL('image/jpeg');

I can now access the data url without running into any errors however the signatures are cut off with a grey area appended below

Code

var fd = new FormData();

function getTicketFieldDataForSubmission(manual_ticket_id, fd){
    $( "#manual-complexform-fields-container"+manual_ticket_id ).children('textarea,select,input,.m-signature-pad').each(function (index, ele) {
        // if(jQuery(ele).attr('type')!='file'){
        //     console.log("MADE IN IN HERE123");
        //     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