Drawing on image on signature-pad task complete but image display size problem

hello everyone…am making one application in which task is …drawing on image so i use signature -pad and on signature-pad am setting image(taking through camera ) …am able to draw on image …but now problem is that image display from camera is too small and not equal to signature-pad canvas size…so am trying to changing the size of image but image size not changed please …help me to solve above problem

my signature.ts 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;
    
  }

   //Other Functions
   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,
     
     
    };


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

      } else {
       
        this.lastImage = this.createFileName();
       this.tempPath = "data:image/jpeg;base64," + imagePath;
      
     this.selectedImagePath = imagePath;
     this.signaturePad.fromDataURL(this.tempPath);
      }
    }, (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);
      }
      
      
    }
     
 
  }

my signature.html file code

signature

<signature-pad [options]=“signaturePadOptions” id=“signatureCanvas” >


.csss file code
page-signature {
signature-pad {
canvas {
border: dashed 1px #cccccc;
//width: 100%;
//height: 350px;
// width: 100%;
height: 300px;
width: 80%;
margin-left: 20px;
position:fixed;
// top:2;
//margin-bottom:100px;
margin-top:50px;
//left:2;
}

      }
      
      .ram{
       // position:fixed;
          margin-top: 28px;
          height:300px ;
          width:92%;
          margin-left: 12px;
          //margin-bottom: 2px;
      }
      .ghi
{
   // position: fixed;
    //bottom: 0;
    // top:10;
   margin-top:17;
    left:0;
    bottom: 2;
   // height:400px ;
}
.sendbox
{
  position: fixed;
    //bottom: 20px;
   margin-bottom:15px;
   margin-top: 50px;
  //margin-left:2px; 
  //margin-right:0px;
}
// .slide-zoom {
//     background: #e6e6e6;
// }

// ion-slide.swiper-slide {
//     left: 25%;
// }
// // .thumb-img {
// //     padding: 10px;
// // }

}

please help me to solve this small size image display problem


1st picture showing small image display on …inside dotted line signature-pad
.i want to display that image in large size …but am not able to display that image…because it directly display on that corner of pad

2nd picture showing result after drawing .

no one has solution to this task ???

this.signaturePad.fromDataURL(‘your image path’,{width: 300, height: 500})