title: Why does canvas context drawImage fail on iPhone
body: <p>The objective is to have the users choice of photograph displayed on both the image and canvas elements.</p>
  
  <p>Why does this code work on Firefox, Chrome, IE, iPad but not on iPhone?  On iPhone 3GS or iPhone 5 the canvas (red border) is simply shown blank albeit the correct size.  </p>
  
  <p>It does seem to work for iPhone screen captures but not photographs.  Web Inspector gives us nothing.</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;style type="text/css"&gt;
      html, body{font-size:120%;}        
      #diag{ font-family:'Courier New';}
      img{border:2px solid blue;}
      canvas{border:2px solid red;}
      &lt;/style&gt;
      &lt;script type="text/javascript"&gt;
      var reader = new FileReader();
      var prev;
      function go() {
          prev = new Date();
          diag('');
          diag('start');
          var imgFile = document.getElementById('submitfile');
          if (imgFile.files &amp;&amp; imgFile.files[0]) {
          reader.onloadend = function () {
              diag('reader.onloadend');
              diag('reader.result.length=' + (reader.result.length / 1024.0 / 1024.0).toFixed(4) + "mb");
              var img = new Image();
              img.onload = function () {
                diag('img.onload');
                var cvs = document.createElement("canvas");
                var ctx = cvs.getContext("2d");
                diag("img.width:" + this.width);
                diag("img.height:" + this.height);
                cvs.width = this.width;
                cvs.height = this.height;
                diag("cvs.width:" + cvs.width);
                diag("cvs.height:" + cvs.height);
                ctx.drawImage(this, 0, 0);
                ctx.font = '18pt Calibri';
                ctx.fillStyle = 'red';
                ctx.fillText('CANVAS COPY', 100, 100);
                document.body.appendChild(cvs); // new canvas
                document.body.appendChild(this); // img element
                diag('ctx.drawImage');
              };
              img.src = reader.result;
          }
          }
          reader.readAsDataURL(imgFile.files[0]);
          diag('reader.readAsDataURL');
      }
      function diag(msg) {
          var now = new Date();
          var ms = now.getTime() - prev.getTime();
          var current_diag_text = document.getElementById("diag").innerHTML;
          var new_diag_text = ms + "ms " + msg + "&lt;br/&gt;" + current_diag_text;
          if (msg === '') {
          document.getElementById("diag").innerHTML = '';
          } else {
          document.getElementById("diag").innerHTML = new_diag_text;
          }
          prev = now;
      }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form name="Upload" action="#" enctype="multipart/form-data" method="post"&gt;
      &lt;p id="diag"&gt;&lt;/p&gt;
      &lt;p&gt;Choose Photo: &lt;input type="file" name="submitfile" id = "submitfile" /&gt;
      &lt;input type="button" value="Send" onclick="go();" /&gt;&lt;/p&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>