Ionic canvas-draw component drawing problem on image

hello all, I have to resize canvas to (500px *200px), but after resizing it to that width,height,… upper portion becomes inaccessible (not able to draw on upper portion of image ) how to fix this problem…please see below my css and ts file

canvas-draw.css file

canvas-draw. {
canvas
{
width: 100vw;
height: 400px;
position: fixed;
top:110px;
// bottom:85px;
//bottom:500px;

//    top-margin:20px;

    left:0;
    z-index: -9999;

}

.sendbox
{
    position: fixed;
    bottom: 0;
}

canvas-draw ts.file

import { Component, ViewChild, Renderer } from ‘@angular/core’;
import { Platform } from ‘ionic-angular’;
import { Camera, CameraOptions } from ‘@ionic-native/camera’;
import { IonicPage, NavController, NavParams } from ‘ionic-angular’;
import { AlertController} from ‘ionic-angular’;

@Component({
selector: ‘canvas-draw’,
templateUrl: ‘canvas-draw.html’
})
export class CanvasDraw {

@ViewChild('myCanvas') canvas: any ;


canvasElement: any;
lastX: number;

lastY: number;
public photos : any;
base64Image:any;

currentColour: string = '#1abc9c';
availableColours: any;

brushSize: number = 10;

constructor(public platform: Platform, public renderer: Renderer,private camera : Camera,public navCtrl: NavController, public navParams: NavParams,private alertCtrl: AlertController) {
    console.log('Hello CanvasDraw Component');

    this.availableColours = [
        '#1abc9c',
        '#3498db',
        '#9b59b6',
        '#e67e22',
        '#e74c3c'
    ];

}


ngAfterViewInit(){

    this.canvasElement = this.canvas.nativeElement;

    this.renderer.setElementAttribute(this.canvasElement, 'width', this.platform.width() + '');
    this.renderer.setElementAttribute(this.canvasElement, 'height', this.platform.height() + '');

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

changeColour(colour){
    this.currentColour = colour;
}

changeSize(size){
    this.brushSize = size;
}

handleStart(ev){

    this.lastX = ev.touches[0].pageX;
    this.lastY = ev.touches[0].pageY;
}

handleMove(ev){

    let ctx = this.canvasElement.getContext('2d');
    let currentX = ev.touches[0].pageX;
    let currentY = ev.touches[0].pageY;

    ctx.beginPath();
    ctx.lineJoin = "round";
    ctx.moveTo(this.lastX, this.lastY);
    ctx.lineTo(currentX, currentY);
    ctx.closePath();
    ctx.strokeStyle = this.currentColour;
    ctx.lineWidth = this.brushSize;
    ctx.stroke();      

    this.lastX = currentX;
    this.lastY = currentY;

}

clearCanvas(){
    let ctx = this.canvasElement.getContext('2d');
    ctx.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height); 
    this.canvasElement.addEventListener('touchstart', ev => this.handleStart(ev));
    this.canvasElement.addEventListener('touchmove', ev => this.handleMove(ev));  
}


takePhoto() 
{

  
  var image = new Image();

  let ctx = this.canvasElement.getContext('2d');

  const options : CameraOptions = 
  {
    quality: 50, // picture quality
    destinationType: this.camera.DestinationType.DATA_URL,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE
  }
  this.camera.getPicture(options).then((imageData) => 
  {
        
      this.base64Image = "data:image/jpeg;base64," + imageData;

      image.src=this.base64Image;
      ctx.drawImage(image, 0, 0, image.width,image.height,     // source rectangle
          0, 0, this.canvasElement.width, this.canvasElement.height);

          this.canvasElement.addEventListener('touchstart', ev => this.handleStart(ev));

this.canvasElement.addEventListener(‘touchmove’, ev => this.handleMove(ev));

    }, (err) => {
      console.log(err);
    });


}

i think there is some changes need to in this :
ctx.drawImage(image, 0, 0, image.width,image.height,
0, 0, this.canvasElement.width, this.canvasElement.height);

please help me to solve this problem