Strange HTML5 Canvas drawComportamiento de la imagen

Question

Estoy escribiendo algunos códigos que utilizan canvas HTML5. En general, funciona bien, pero ahora encontré un comportamiento muy extraño. Lo extraño es que es consistente en diferentes navegadores, por lo que debe entenderse que entendí mal ... A pesar de que 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 está sobrecargada como diez veces su ancho ... Eso es extraño 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 el tamaño del lienzo, debe quedar bien.

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

Answer 1

Encontré esta "característica" también para ser un poco fastidioso. Parece que no desea usar CSS para establecer las propiedades de ancho y alto para el elemento canvas. Agregue el elemento canvas con atributos (en lugar de CSS) y las dimensiones deberían corregirse por sí mismas.

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

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