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):Strange HTML5 Canvas drawComportamiento de la imagen
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?
¿Podría publicar todos los javascript y html? – Castrohenge