Ionic2 Signature Pad resize image

Question

Am capturing an image through camera and saving it to signature pad. The image is occupying certain portion on signature pad. How to resize image to that of the size of signature pad.

Here is the screen shot of image after saving it to signature pad. Grey part is signature pad. Image is to the top left corner.

Can some body please tell how can I resize image or at least tell how to get height and width of image? Signature pad dimensions are statically given

Answer 1

people who want to edit the sign back again its not the good solution. I fixed by redrawing image into signPad.

    this.signaturePad.clear();
    //If it is already signed load sign into signPad. 
    if(this.signatureData) {
        let canvas = document.getElementsByTagName('canvas')[0];
        let img = document.createElement("img");
        img.src = this.signatureData;
        canvas.getContext("2d").drawImage(img, 0, 0);
    }

Answer 2

I've got it resolved by doing some workaround. We need to change the device pixel ratio and not the canvas size. Something like the following.

var canvas = document.getElementsByTagName('canvas')[0];
this.resizeCanvas(canvas);

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