Ich schreibe einen Code, der HTML5-Canvas verwendet. Im Allgemeinen funktioniert es gut, aber jetzt fand ich ein sehr merkwürdiges Verhalten. Das seltsame ist, dass es auf verschiedenen Browsern konsistent ist, also muss das so sein, dass ich die Sache falsch verstanden habe ... Trotzdem scheinen die Dokumente genau zu sagen, 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 jQuery erneut verwenden, um dieses Element an ein Div anzuhängen, das sich bereits auf der Seite befindet (das leer ist). Das Ergebnis wird sein, dass das Bild um das Zehnfache seiner Breite überdehnt ist. Das ist seltsam, da ich für drawImage die Werte w und h verwenden sollte, um das Bild zu skalieren, und vorausgesetzt, dass w und h die Werte sind Größe der Leinwand, sollte es gut passen.

Was mache ich falsch? Liegt es daran, dass ich den gerenderten DOM-Baum abzeichne?