title: context.drawImage() doesn't work with new Image() instance (chrome)
body: <p>I am trying to figure out why the classic way of image preloading before drawing in canvas is firing a "Type error" on chrome.</p>
  
  <p>Let's see the situation:</p>
  
  <p>I try to preload images in 3 different ways:</p>
  
  <ol>
  <li>creating a new Image() instance</li>
  <li>creating an image element</li>
  <li>creating a jQuery image object</li>
  </ol>
  
  <p>Or if you prefer some code:</p>
  
  <pre><code>var canvas1 = document.getElementById('canvas-1'),
      context1 = canvas1.getContext('2d'),
      image1 = new Image(),
      canvas2 = document.getElementById('canvas-2'),
      context2 = canvas2.getContext('2d'),
      image2 = document.createElement('img'),
      $canvas3 = $('#canvas-3'),
      context3 = $canvas3.get(0).getContext('2d'),
      $image3 = $('&lt;img&gt;'),
      loadImage = function (image, context, debugIndice) {
          debugIndice = debugIndice || -1;
          image.onload = function () {
              try {
                  context.drawImage(this, 0, 0, 100, 100);
              }
              catch (e) {
                  console.log('error for debugIndice', debugIndice, e, this);
              }
          }
          image.src = "http://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png";
      };
  
  loadImage(image1, context1, 1);
  loadImage(image2, context2, 2);
  loadImage($image3.get(0), context3, 3);
  </code></pre>
  
  <p>Please watch the <a href="http://jsfiddle.net/7jPZ3/2/" rel="nofollow noreferrer">Fiddle</a> here.</p>
  
  <p>I only have a Type error for the first loadImage call.</p>
  
  <p>I am using Google Chrome 27.0.1453.94 on Windows at my company, and Google Chrome 27.0.1453.93 on Mac OS X, both x64 platforms.</p>
  
  <p>This code works fine in Firefox, <strong>and even IE9</strong> (I'm not kidding, I swear it)</p>
  
  <p>Does someone knows about this Image() class problem in Chrome ?</p>
  
  <p>EDIT: Here is a screen of the bug:
  <img src="https://i.stack.imgur.com/K6Gd5.png" alt="Chrome - Image bug"></p>
  
  <p>You can watch it on real size <a href="http://d.pr/i/Fj0L" rel="nofollow noreferrer">here</a>.</p>
  
  <p>This is not a big problem, anyway I will use the jQuery way, but I am really curious to see what is the cause, and why did I lose some time trying to fix it!</p>
  
  <p>I took a look at this <a href="https://stackoverflow.com/questions/16377375/using-canvas-drawimage-in-chrome-extension-content-script/16378270">bug</a>.</p>
  
  <p>I am still asking as I am not sure that it is the same ?!</p>