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

   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?