how to add a background image to signature pad

How do I export together with the background image together?

Demo :http://59.127.247.144/AmhsGlassrecord/

I want to get results : enter image description here

Javascript

var wrapper = document.getElementById("signature-pad"),
    clearButton = wrapper.querySelector("[data-action=clear]"),
    saveButton = wrapper.querySelector("[data-action=save]"),
    canvas = wrapper.querySelector("canvas"),
    signaturePad;

function resizeCanvas() {
    var ratio = Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
}

window.onresize = resizeCanvas;
resizeCanvas();

signaturePad = new SignaturePad(canvas);
var signaturePad = new SignaturePad(canvas);
signaturePad.minWidth = 1;
signaturePad.maxWidth = 1;
signaturePad.penColor = "rgb(66, 133, 244)";

clearButton.addEventListener("click", function (event) {
    signaturePad.clear();
});

saveButton.addEventListener("click", function (event) {
    if (signaturePad.isEmpty()) {
        alert("Please do not blank.");
    } else {
        //document.getElementById("hfSign").value = signaturePad.toDataURL();
        window.open(signaturePad.toDataURL());
    }
});

Solution

You'll need to draw the image on the canvas with Javascript, CSS will not work.
The background image that you have in the signature pad comes from another domain, it needs to be in your domain otherwise you cannot export it or you'll get the tainted canvas error.

To draw the image use the following code (but be sure that the image is hosted in the same domain of your app) :

Give an ID to your canvas, not only the wrapper :

var canvas = document.getElementById("ID-of-your-canvas"),
ctx = canvas.getContext("2d");

var background = new Image();
// The image needs to be in your domain.
background.src = "http://dkpopnews.fooyoh.com/files/attach/images4/14989425/2015/1/14995985/thumbnail_725x300_ratio.jpg";

// Make sure the image is loaded first otherwise nothing will draw.
background.onload = function() {
    ctx.drawImage(background, 0, 0);
};

function action() {
    // draw the image on the canvas
    ctx.drawImage(background, 0, 0);

    //// Then continue with your code 
    var wrapper = document.getElementById("signature-pad"),
        clearButton = wrapper.querySelector("[data-action=clear]"),
        saveButton = wrapper.querySelector("[data-action=save]"),
        canvas = wrapper.querySelector("canvas"),
        signaturePad;

    function resizeCanvas() {
        var ratio = Math.max(window.devicePixelRatio || 1, 1);
        canvas.width = canvas.offsetWidth * ratio;
        canvas.height = canvas.offsetHeight * ratio;
        canvas.getContext("2d").scale(ratio, ratio);
    }

    window.onresize = resizeCanvas;
    resizeCanvas();

    signaturePad = new SignaturePad(canvas);
    var signaturePad = new SignaturePad(canvas);
    signaturePad.minWidth = 1;
    signaturePad.maxWidth = 1;
    signaturePad.penColor = "rgb(66, 133, 244)";

    clearButton.addEventListener("click", function(event) {
        signaturePad.clear();
    });

    saveButton.addEventListener("click", function(event) {
        if (signaturePad.isEmpty()) {
            alert("Please do not blank.");
        } else {
            //document.getElementById("hfSign").value = signaturePad.toDataURL();
            window.open(signaturePad.toDataURL());
        }
    });
}

That would work at first with the image. Note that you need to draw again the image when the user clicks on the clear button.

The following demo works using instead of an image a color instead :

var canvas = document.getElementById("ID-of-your-canvas"),
ctx = canvas.getContext("2d");

function setBackground(color){
    ctx.fillStyle = color;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

//// Then continue with your code 
var wrapper = document.getElementById("signature-pad"),
    clearButton = wrapper.querySelector("[data-action=clear]"),
    saveButton = wrapper.querySelector("[data-action=save]"),
    canvas = wrapper.querySelector("canvas"),
    signaturePad;

function resizeCanvas() {
    var ratio = Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
}

window.onresize = resizeCanvas;
resizeCanvas();

signaturePad = new SignaturePad(canvas);
var signaturePad = new SignaturePad(canvas);
signaturePad.minWidth = 1;
signaturePad.maxWidth = 1;
signaturePad.penColor = "rgb(66, 133, 244)";
setBackground("#0e2630");

clearButton.addEventListener("click", function(event) {
    signaturePad.clear();
    setBackground("#0e2630");
});

saveButton.addEventListener("click", function(event) {
    if (signaturePad.isEmpty()) {
        alert("Please do not blank.");
    } else {
        //document.getElementById("hfSign").value = signaturePad.toDataURL();
        window.open(signaturePad.toDataURL());
    }
});

And the result :