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

Question

Я пишу код, который использует 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?

Answer 1

Я также нашел эту "особенность" немного утомительной. Кажется, что вы не хотите использовать CSS для установки свойств ширины и высоты для элемента canvas. Добавьте элемент canvas с атрибутами (а не с CSS), и размеры должны исправить себя.

var canvas = jQuery("<canvas/>", {
    'id' : this.viewId + "canvas"
});

$('#' + this.viewId).attr('height', this.height).attr('width', this.width);