title: HTML5 - unexpected results with canvas drawImage
body: <p>I'm just learning how to use the HTML5 canvas element. I've been successful in drawing rectangles, calling <code>getImageData</code>, manipulating pixels and then <code>putImageData</code> to see the rectangles change colour, etc.</p>
  
  <p>Now I'm trying to load an image into the canvas I've hit a snag. After calling <code>drawImage</code> on the canvas's context, <code>fillRect</code> only draws in areas that don't have an image drawn into them, like it's drawing the rectangles behind the images, even though it's called after <code>drawImage</code>. Also, <code>putImageData</code> stops working, even on the visible areas containing rectangles, my pixel manipulation no longer happens. If I comment out the line with <code>drawImage</code>, it works again. </p>
  
  <p>What I want to be able to do is manipulate pixels in the image the same way I was doing with the rectangles. Is there any reason why this wouldn't work?</p>
  
  <p>Draw Image code:</p>
  
  <pre><code>var img = new Image();
  img.onload = function () {
       //comment out the following line, everything works, but no image on canvas
       //if it's left in, the image sits over the rectangles, and the pixel
       //manipulation does not occur
       context.drawImage(img, 0, 0, width / 2, height / 2);
  }
  img.src = path;
  </code></pre>
  
  <p>Draw Rectangles code:</p>
  
  <pre><code>for (var i = 0; i &lt; amount; i++)
  {
      x = random(width - size);
      y = random(height - size);
      context.fillStyle = randomColor();
      context.fillRect(x, y, size, size);
  }
  </code></pre>
  
  <p>Maniuplate pixels code:</p>
  
  <pre><code>var imgd = context.getImageData(0, 0, width, height);
  var pix = imgd.data;
  
  //loop through and do stuff
  
  context.putImageData(imgd, 0, 0);
  </code></pre>