Click here to Skip to main content
15,850,360 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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();" >


function PreviewImage() {
   var oFReader = new FileReader();
   oFReader.onload = function (oFREvent) {
       var canvas = document.getElementById('myCanvas');
       ctx = canvas.getContext('2d');
       ctx.clearRect(0, 0, 270, 300);
       imageUrl =;
       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?
Updated 14-Sep-14 4:02am

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900