Estoy escribiendo un código que usa el lienzo HTML5. En general funciona bien, pero ahora encontré un comportamiento muy extraño. Lo extraño es que es consistente en diferentes navegadores, por lo que debe ser que entendí mal la cosa ... A pesar de que los documentos parecen decir exactamente lo que estoy haciendo. Aquí está el código (es un método de objeto):

   MyCanvas.prototype.getElement = function() {

        var innerHtml = "<div></div>";

        var elem = jQuery(innerHtml, {
            'id' : this.viewId
        });



        var canvas = jQuery("<canvas/>", {
            '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;
    };

Después de esto, usaré jQuery nuevamente para agregar este elemento a un Div que ya está en la página (que está en blanco). El resultado será que la imagen se estira demasiado como diez veces su ancho ... Eso es extraño porque, por lo que entendí de drawImage, debería usar los valores w y h para escalar la imagen y dado que w y h son los tamaño del lienzo, debe quedar bien.

¿Qué estoy haciendo mal? ¿Es porque hago el dibujo del árbol DOM representado?