title: Strange HTML5 Canvas drawImage behaviour
body: <p>I am writing some code that uses HTML5 canvas. Generally it works well, but now I found a very strange behaviour. The weird thing is that it is consistent on different browsers, so must be that I understood the thing wrong... Despite the docs seem to say exactly what I am doing. Here is the code (it's an object method):</p>
  
  <pre><code>   MyCanvas.prototype.getElement = function() {
  
          var innerHtml = "&lt;div&gt;&lt;/div&gt;";
  
          var elem = jQuery(innerHtml, {
              'id' : this.viewId
          });
  
  
  
          var canvas = jQuery("&lt;canvas/&gt;", {
              'id' : this.viewId + "canvas",
              'width' : this.width,
              'height' : this.height
          });
  
          var w = this.width;
          var h = this.height;
  
          jQuery(elem).append(canvas);
  
          var imgElem = new Image();
  
          imgElem.src = this.maskImage;
          imgElem.onload = function() {
              var ctx = canvas[0].getContext('2d');
              ctx.drawImage(this, 0, 0, w, h);
  
          };
  
          return elem;
      };
  </code></pre>
  
  <p>After this I'll use jQuery again to append this element to a Div that is already in the page (which is blank). 
  The result will be that the image is overstretched like ten times it's width.... That is weird because, for what I understood of drawImage, it should use the w and h values to scale the image and given that w and h are the size of the canvas, it should fit well.</p>
  
  <p>What am I doing wrong? Is it because I do the drawing off the rendered DOM tree?</p>