Javascript 画布上的图像绘制看起来失真

我正在使用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:

---

这可以很好地工作，但由于修复了300400大小，一些图像看起来非常糟糕或被削减。我想知道如何修复它，使图像与我在图库中看到的一样？

img.onload=function（）{c.width=this.width；c.height=this.height；ctx.drawImage（this，0,0）

这使我的代码仍在工作，但我看不出有任何区别。可能是重复的，并且您没有通过CSS将画布宽度和高度设置为固定值？我之前在上述画布中有过它，但根据第一条注释将其删除

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