Странное поведение HTML5 Canvas drawImage

Я пишу код, который использует холст HTML5. Как правило, он работает хорошо, но теперь я нашел очень странное поведение. Странно то, что он совместим в разных браузерах, поэтому должно быть, что я понял, что неправильно... Несмотря на то, что документы, похоже, точно говорят о том, что я делаю. Вот код (это метод объекта):

   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;
    };

После этого я снова буду использовать jQuery, чтобы добавить этот элемент в Div, который уже находится на странице (что пусто). Результатом будет то, что изображение будет растянуто, как в десять раз больше ширины... Это странно, потому что для того, что я понял drawImage, он должен использовать значения w и h для масштабирования изображения и учитывая, что w и h являются размер холста, он должен хорошо подходить.

Что я делаю неправильно? Это из-за того, что я рисую чертеж дерева DOM?

Ответ 1