image using cordova plugin looks horrible on canvas

i am using cordova for my ios app which captures the image

the code looks

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


function onSuccessCamera(imageURI) {                     
          var imgData = "data:image/jpeg;base64," + imageURI;
          uploadFile(imgData);
                                  }

function uploadFile(file){
 var c=document.getElementById("picture");

                                                c.width = window.innerWidth-50;//offset to prevent image flowing out of frame
                                                //  window.alert(window.innerWidth+":"+ window.innerHeight);414:736
                                                c.height = "330";//window.innerHeight;//this.height;
                                                var ctx=c.getContext("2d");
                                                var showImg = new Image();
                                                showImg.onload = function(){

                                                    var ratio = 1;
                                                    if (this.height > c.height) {
                                                        ratio = c.height/this.height;
                                                    }
                                                    else if (this.width>c.width) {
                                                        ratio = c.width/this.width;
                                                    }



                                                    ctx.drawImage(this,0,0, this.width*ratio, this.height*ratio);
                                                    // window.alert(c.width + ':' + c.height);
                                                };
                                                showImg.src = file;
}

i dont know why the image looks so horrible

It's because of the retina screen.

Make the height and width of the canvas to be the double, but then style it to be half pixels

c.width = (window.innerWidth-50)*2;//offset to prevent image flowing out of frame
c.height = 330*2;//window.innerHeight;//this.height;

c.style.width = (c.width/2)+"px";
c.style.height = (c.height/2)+"px";

Also, you can consider using a higher value on quality camera option.