Facing issues with 'Re-Drawing' the signature using data url

Question

I wanted to add a signature pad field in my form on my website so that I could capture the signature of users and save them and then show them again in edit screen. For this I used Signature Pad Library. The signature field is being shown successfully and its capturing the dataUrl as well and saving it fine. The problem comes when I want to display it, the library's docs says to just use the dataUrl in the image src or use the

signaturePad.fromDataURL("data:image/png;base64,iVBORw0K...");

but in my case it's not showing the already drawn signature. Also, I noticed that whatever I draw in the signature field the dataUrl remains the same (I don't know if this is how its suppose to be). I tried using the below code to convert the dataUrl in image but its only showing a dark empty image from which I assuming that maybe I am not getting the signature value correctly.

$data_uri = "data:image/png;base64,iVBORw0K...";
$encoded_image = explode(",", $data_uri)[1];
$decoded_image = base64_decode($encoded_image);
file_put_contents("signature.png", $decoded_image);

Here is my code:

    var canvas = document.querySelector("canvas");
    var signaturePad = new SignaturePad(canvas);

    // To display the already saved signature
    var prevSignature = $("#pat-signature").val();
    signaturePad.fromDataURL(prevSignature);

    // Returns signature image as data URL (see https://mdn.io/todataurl for the list of possible parameters)
    var sigData = signaturePad.toDataURL(); // save image as PNG
    // Catch the updated value from signature field on form submit
    $( "#pat-medical-form" ).submit(function( event ) {
        document.getElementById('pat-signature').value = sigData;
        return;
    });

Answer 1

Please I would advise you to follow this link for a working example:

https://jsfiddle.net/szimek/osenxvjc/

Personally, I have no problem initializing and using signature pad this way:

 window.onresize = resizeCanvas;
    var canvas = document.getElementById('signature-pad');

    // Adjust canvas coordinate space taking into account pixel ratio,
    // to make it look crisp on mobile devices.
    // This also causes canvas to be cleared.
    resizeCanvas(canvas);

    // Set up the signature pad

    var signaturePad = new SignaturePad(canvas, {
        // backgroundColor: 'rgb(255,255,255)', // necessary for saving image as JPEG; can be removed is only saving as PNG or SVG
        penColor: "rgb(48, 70, 243)",
        onEnd: function() {
            // update the hiden field
            document.getElementById('site_supervisor_sign').value = signaturePad.toDataURL();
            console.log('signature recorded');
        },
        onBegin: function() {
            document.getElementById('site_supervisor_sign').value = signaturePad.toDataURL();
        }
    });


/**
 * Handle the resizing of the canvas for the signature pad
 */
function resizeCanvas(canvas) {
    // When zoomed out to less than 100%, for some very strange reason,
    // some browsers report devicePixelRatio as less than 1
    // and only part of the canvas is cleared then.
    var ratio = Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    try {
        canvas.getContext("2d").scale(ratio, ratio);
    } catch (error) {

    }
}