functions - Extraño HTML5 Canvas DrawImage comportamiento

html5 canvas functions

Question

Estoy escribiendo un código que utiliza lienzo HTML5. En general funciona bien, pero ahora encuentro un comportamiento muy extraño. Lo extraño es que es consistente en diferentes navegadores, así que debe ser que entendí lo que estaba mal ... A pesar de que los documentos parecen decir exactamente lo que estoy haciendo. Aquí está el código (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 usaré jQuery nuevamente para agregar este elemento a una Div que ya está en la página (que está en blanco). El resultado será que la imagen está sobrecargada como diez veces su ancho ... Eso es raro porque, por lo que entendí de drawImage, debería usar los valores w y h para escalar la imagen y dado que w y h son los Tamaño del lienzo, debe encajar bien.

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

Answer 1

Me pareció que esta "característica" también era un poco molesta. Parece que no quieres usar CSS para establecer las propiedades de ancho y alto para el elemento de lienzo. Agregue el elemento del lienzo 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);