Ionic 2 Signature Pad resize image

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);
}

Thanks …but where should i placed this above code in my typescript file code

import { Component, ViewChild, Renderer } from ‘@angular/core’;
import { NavController} from ‘ionic-angular’;
import {SignaturePad} from ‘angular2-signaturepad/signature-pad’;
import { Platform } from ‘ionic-angular’;
import {HomePage} from ‘…/home/home’;
import { Camera, CameraOptions } from ‘@ionic-native/camera’;
import { Diagnostic } from ‘@ionic-native/diagnostic’;
import { FilePath } from ‘@ionic-native/file-path’;
import { ToastController } from ‘ionic-angular’;
import { ImageViewerController } from ‘ionic-img-viewer’;

@Component({
selector: ‘page-signature’,
templateUrl: ‘signature.html’,
})
export class SignaturePage {
@ViewChild(SignaturePad) public signaturePad : SignaturePad;
//_imageViewerCtrl: ImageViewerController;

public photos : any;
base64Image:any;
//public tempPath:string;
lastImage;
imagePath;
selectedImagePath;
targetWidth :400;
targetHeight:400;
// currentColour: string = ‘#1abc9c’;
// availableColours: any;
// width: 5000;
// height: 5000;
// width: 1280;
// height: 1280;
//prototype: any

//340
//200
// canvasElement: any;
// CANVAS_width= 500;
// CANVAS_height= 700;

public signaturePadOptions : Object = {
‘minWidth’: 2,
‘canvasWidth’: 340,
‘canvasHeight’: 200,
‘quality’: 100,
‘penColor’: “rgb(66, 133, 244)”,

//sourceType:sourceType,
  // destinationType: DestinationType,
  'destinationType': this.camera.DestinationType.DATA_URL,
  'saveToPhotoAlbum': true,
  'correctOrientation': true,
  //mediaType: 2
  'encodingType': this.camera.EncodingType.JPEG,
  'mediaType': this.camera.MediaType.PICTURE,
  'allowEdit' : true,
  'targetHeight':800,
  'targetwidth' :800,
  // 'width': window.screen.width,
  // 'height': window.screen.height,
  // 'width': 5000,
  // 'height': 5000,

};
public signatureImage : string;
public tempPath : string;
constructor(public navCtrl: NavController,private camera : Camera,public renderer: Renderer,private diagnostic: Diagnostic,public platform:Platform,private filePath: FilePath,private toastCtrl: ToastController,imageViewerCtrl: ImageViewerController) {
//this._imageViewerCtrl = imageViewerCtrl;

}

ngAfterViewInit() {
console.log(“signature on conole”);
this.signaturePad.clear();
// this.canvasElement = this.canvas.nativeElement;
this.canvasResize();
// this.drawComplete();

}
ngOnInit() {
this.photos = [];
}

drawCancel() {
this.navCtrl.push(HomePage);
}

drawComplete() {
this.tempPath = this.signaturePad.toDataURL();
console.log(this.tempPath);
this.navCtrl.push(HomePage, {tempPath: this.tempPath});

}

drawClear() {
this.signaturePad.clear();
}

canvasResize() {
let canvas = document.querySelector(‘canvas’);

this.signaturePad.set('minWidth', 1);
this.signaturePad.set('canvasWidth', canvas.offsetWidth);
this.signaturePad.set('canvasHeight', canvas.offsetHeight);

}

public takePicture(sourceType, DestinationType) {
var options = {
quality: 100,

  //sourceType: sourceType,
  // destinationType: DestinationType,
  destinationType: this.camera.DestinationType.DATA_URL,
  saveToPhotoAlbum: true,
  correctOrientation: true,
  //mediaType: 2,
  encodingType: this.camera.EncodingType.JPEG,
 mediaType: this.camera.MediaType.PICTURE,
 // allowEdit : true,
  //height:100,
  //width:200,
 
  targetWidth :1000,
  targetHeight:1000,
  // width: window.screen.width,
  // height: window.screen.height,
 
};


this.camera.getPicture(options).then((imagePath) => {
  if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {
    this.filePath.resolveNativePath(imagePath)
      .then(filePath => {            
        this.lastImage = this.createFileName();           
        this.tempPath = "data:image/jpeg;base64," + imagePath;
        this.selectedImagePath = imagePath;
       
       //this.signaturePad.fromDataURL(this.tempPath);
      //this.tempPath = this.signaturePad.toDataURL(this.tempPath);
      });

  } else {
   
    this.lastImage = this.createFileName();
   this.tempPath = "data:image/jpeg;base64," + imagePath;
  
 this.selectedImagePath = imagePath;
 this.signaturePad.fromDataURL(this.tempPath);
  // this.selectedImagePath
    this.tempPath = this.signaturePad.toDataURL(this.tempPath);
    // let canvas = document.querySelector('canvas');

    // this.signaturePad.set('canvasWidth', canvas.this.tempath);
    // this.signaturePad.set('canvasHeight', canvas.this.tempath);
    // let tempPathheight =500; 
    // this.signaturePad.set('temPath', tempPathheight);
    //this.tempPath.Height = CanvasHeight;
  }
}, (err) => {
 // this.presentToast(err);
 console.log(err);
});

}

private createFileName() {
var d = new Date(),
n = d.getTime(),
newFileName = n + “.jpg”;
return newFileName;
}

  perform()
  {
    var data = this.signaturePad.toData(); 
    if (data) {
    
      data.pop(); // remove the last dot or line
     this.signaturePad.fromData(data);
  }
   }

}