comportamiento extraño HTML5 Canvas drawImage

Question

Estoy escribiendo un código que lienzo usos HTML5. Generalmente funciona bien, pero ahora me encontré con un comportamiento muy extraño. Lo extraño es que es constante en diferentes navegadores, por lo que debe ser que entendía las cosas mal ... A pesar de los documentos parecen decir exactamente lo que estoy haciendo. Aquí está el código (que es un método de objeto):

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

Después de esto voy a utilizar jQuery nuevo para añadir este elemento a un div que ya está en la página (que es blanco). El resultado será que la imagen se desbordados como diez veces el mismo de la anchura .... Eso es porque extraño, por lo que he entendido de drawImage, se debe utilizar el An y valores para escalar la imagen y dado que w y h son la tamaño del lienzo, que debe encajar bien.

¿Qué estoy haciendo mal? ¿Es porque hago el dibujo del árbol DOM prestados?

Answer 1

He encontrado esta "característica", además de ser un irritante bits. Parece como si usted no desea utilizar CSS para establecer las propiedades de anchura y altura para el elemento canvas. Añadir el elemento canvas con atributos (en lugar de CSS) y las dimensiones deben corregirse.

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

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