Image is not filling full canvas space

Question

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.

I am facing this issue only in iPhone.

HTML

<canvas id="myCanvas" width="270" height="300"></canvas>
<input type="file" id="uploadImage" name="upload" value="Upload" onchange="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?

Attachment

Find this image to see the demo image.