HTML5 Image fit Issue in Canvas

See more:

Javascript

HTML5

I am working on HTML5 application for mobile. I am using a canvas element and file upload element. Whenever user hit this file upload element from mobile. He sees two options. 1. Choose existing photo 2. Take new photo

If he choose existing photo, this is fixed well in my canvas but if he clicks new photo, it does not fit into canvas. Width is fine but height of click image shown in canvas in not more than 50px.

This issue is specific to iPhone

Please find this image to see the issue. Newly taken photo does not occupy space till clear button. It is squeezed towards top.

<canvas id="myCanvas" width="270" height="300" > </canvas >
<input type="file" id="uploadImage" name="upload" value="Upload"  önchange="PreviewImage();" >

Javascript

function PreviewImage() {
   var oFReader = new FileReader();
   oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
   oFReader.onload = function (oFREvent) {
       var canvas = document.getElementById('myCanvas');
       ctx = canvas.getContext('2d');
       ctx.clearRect(0, 0, 270, 300);
       imageUrl = oFREvent.target.result;
       var base_image = new Image();
       base_image.src = imageUrl;
       base_image.onload = function () {
       ctx.drawImage(base_image, 0, 0, 270, 300);
   }
 };
}

I have searched many sites but could not find solution of this issue. Any help?