title: getImageData() returning all zeros
body: <p>I'm trying to output the pixel values from an image. The image is loading correctly; another answer on here suggested that the browswer is trying to read the pixels before the image is finished loading, but I can see that it's loaded by the time the alert() fires.</p>
  
  <pre><code>function initContext(canvasID, contextType)
  {
     var canvas = document.getElementById(canvasID);
     var context = canvas.getContext(contextType);
     return context;
  }
  
  function loadImage(imageSource, context)
  {
      var imageObj = new Image();
      imageObj.onload = function()
      {
          context.drawImage(imageObj, 0, 0);
      };
      imageObj.src = imageSource;
      return imageObj;
  }
  
  function readImage(imageData)
  {
      console.log();
      console.log(imageData.data[0]);
  }
  
  var context = initContext('canvas','2d');
  var imageObj = loadImage('images/color-test.png',context);
  var imageData = context.getImageData(0,0,10,10);
  alert();
  readImage(imageData);
  </code></pre>