title: getImageData returns white image
body: <p>I need to read the image data from an image object in javascript.
  But my code returns always a blank array (set to 255)  </p>
  
  <pre><code>&lt;html&gt;
    &lt;header&gt;
    &lt;/header&gt;
    &lt;body&gt;
      &lt;input type="file" id="imgfile" onchange="testImageData(event);" /&gt;
      &lt;canvas id="canvas1" width="640" height="480"&gt;&lt;/canvas&gt;
      &lt;script src="./../scripts/cam.js" &gt;&lt;/script&gt;
    &lt;/body&gt;    
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the script</p>
  
  <pre><code>var canvas1 = document.getElementById('canvas1');
  var context1 = canvas1.getContext('2d');
  function getImageData(image){
    /*
      returns Uint8ClampedArray object 
      takes an image obj
    */
    var canvas = document.createElement("canvas");
    canvas.height = image.height;
    canvas.width = image.width;
    var ctx = canvas.getContext("2d");
    ctx.width = image.width;
    ctx.height = image.height;
    ctx.drawImage(image,0,0);
    return ctx.getImageData(0, 0, ctx.width, ctx.height);
  }
  
  function testImageData(event){
    var selectedFile = event.target.files[0];
    var reader = new FileReader();
    var img = new Image();
  
    reader.onload = function(event) {
      console.log('onload');
      img.src = event.target.result;
      img.onload = function(){
        context1.drawImage(img, 0,0, img.width, img.height);
        var imgData = getImageData(img);
        // console.log(imgData);
        var data = imgData.data;
        for(var i = 0; i&lt;data.length;i+=4){
          console.log(data[i],data[i+1],data[i+2],data[i+3]);
        }
      }
    };
  </code></pre>
  
  <p>
  In my understanding, the console.log should return me the data in RGBA.
  But I'm just getting 255.</p>
  
  <p>
  <a href="https://i.stack.imgur.com/f5rKU.png" rel="nofollow noreferrer">console.log output</a></p>
  
  <hr>
  
  <h2>EDIT:</h2>
  
  <p>Okay I found a work around but I don't understand why this is working.<br>
  Instead using getImageData, I get the data directly from the drawn context1.  </p>
  
  <pre><code>function testImageData(event){
    var selectedFile = event.target.files[0];
    var reader = new FileReader();
    var img = new Image();
  
    reader.onload = function(event) {
      console.log('onload');
      img.src = event.target.result;
      img.onload = function(){
        context1.drawImage(img, 0,0, img.width, img.height);
        var imgData = context1.getImageData(0,0,img.width,img.height);
        var data = imgData.data;
        for(var i = 0; i&lt;data.length;i+=4){
          console.log(data[i],data[i+1],data[i+2],data[i+3]);
        }
      }
    };
  </code></pre>
  
  <p>So the problem must lie in creating a new canvas.</p>