画布上的图像画面看起来扭曲

Question

我正在使用cordova从相机或画廊获取图像。我把它放在画布上的方式如下：

function getImageFromCamera(){
    navigator.camera.getPicture(onSuccessCamera, onFailureCamera, {
       quality: 25,
       destinationType: navigator.camera.DestinationType.DATA_URL,
       correctOrientation: true,
       allowEdit:false
    });

 function onSuccessCamera(imageURI) {
    var c=document.getElementById("picture");
    var ctx=c.getContext("2d");
    var showImg = new Image;
    showImg.onload = function(){
           c.width = this.width;
           c.height = this.height;
                                                      ctx.drawImage(this,0,0);
                                            };

    showImg.src = url;
  }
}

HTML：

<canvas id="picture"></canvas>

这样可以正常工作，但是由于修复了300,400尺寸，一些图像看起来非常可怕或减少了。我想知道如何修复它以便我在画廊中看到图像？