Seltsame HTML5 Canvas drawImage Verhalten

Question

Ich schreibe einige Code, Anwendungen HTML5-Canvas. Im Allgemeinen funktioniert es gut, aber jetzt fand ich ein sehr seltsames Verhalten. Das Seltsame ist, dass es auf verschiedenen Browsern konsistent ist, so muss es sein, dass ich die Sache falsch verstanden ... Trotz der docs, genau zu sagen scheinen, was ich tue. Hier ist der Code (es ist eine Objektmethode):

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

Danach werde ich wieder verwenden jQuery dieses Element ein Div anhängen, die bereits in der Seite ist (das ist leer). Das Ergebnis wird sein, dass das Bild wie zehnmal Breitet es überdehnt wird .... Das ist komisch, weil, für das, was ich von drawImage verstanden, sollte es die w und h Werte verwenden, um das Bild und gegeben zu skalieren, dass w und h die sind Größe der Leinwand, es sollte gut passen.

Was mache ich falsch? Ist es, weil ich die Zeichnung aus dem gerenderten DOM-Baum zu tun?

Answer 1

Ich fand dieses „Feature“ auch ein bisschen lästig zu sein. Es scheint, als ob Sie nicht wollen, CSS verwenden, um die Breite und Höhe Eigenschaften für das Canvas-Element zu setzen. Fügen Sie das Canvas-Element mit Attributen (statt CSS) und die Abmessungen sollten sich korrigieren.

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

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