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-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