title: HTML5 canvas getImageData() can't work
body: <p>When I use the getImageData() function to get the data of a image with chrome, it says that Uncaught IndexSizeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.
  Here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;canvastest&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;img src="flower.jpg" hidden /&gt;
  &lt;canvas id="drawing" width="600" height="532"&gt;a drawing of something&lt;/canvas&gt;
  &lt;script type="text/javascript" &gt;
      var drawing = document.getElementById("drawing");
      if (drawing.getContext){
          var context = drawing.getContext("2d"),
              image = document.images[0],
              imageData,data,
              i,len,average,
              red,blue,green,alpha;
  
          image.onload = function(){
              context.drawImage(image,0,0);
          };
  
          imageData = context.getImageData(0,0,image.width,image.height);
          data = imageData.data;
  
          for (i=0,len=data.length;i&lt;len;i+=4){
              red = data[i];
              green = data[i+1];
              blue = data[i+2];
              alpha = data[i+3];
  
              average = Math.floor((red + green + blue) / 3);
  
              data[i] = average;
              data[i+1] = average;
              data[i+2] = average;
          }
  
          imageData.data = data;
          context.putImageData(imageData,0,0);
      }
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>How could it happended? And how to fix it?</p>