Estou escrevendo algum código que usa a tela HTML5. Geralmente funciona bem, mas agora encontrei um comportamento muito estranho. O estranho é que é consistente em diferentes navegadores, por isso devo entender que a coisa está errada ... Apesar dos documentos parecerem dizer exatamente o que estou fazendo. Aqui está o código (é um 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;
    };

Depois disso, usarei o jQuery novamente para anexar esse elemento a uma Div que já está na página (que está em branco). O resultado será que a imagem está sobrecarregada com dez vezes a largura ... Isso é estranho, porque, pelo que entendi do drawImage, ele deve usar os valores w e h para escalar a imagem e, considerando que w e h são os tamanho da tela, deve caber bem.

O que estou fazendo errado? É porque eu faço o desenho da árvore DOM renderizada?