Seltsam HTML5 Canvas drawImage Verhalten

Question

Ich schreibe Code, der HTML5-Canvas verwendet. Generell funktioniert es gut, aber jetzt habe ich ein sehr merkwürdiges Verhalten gefunden. Das komische daran ist, dass es auf verschiedenen Browsern konsistent ist, also muss ich das Ding falsch verstanden haben ... Trotz der Docs scheint genau zu sagen was ich mache. 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 ich jQuery wieder verwenden werden, um dieses Element zu einem Div anhängen, die bereits in der Seite (was leer ist). Das Ergebnis wird sein, dass das Bild wie zehn Mal überbreite ist .... Das ist komisch, weil, was ich von drawImage verstand, sollte es die w und h Werte verwenden, um das Bild zu skalieren und gegeben, dass w und h sind die Größe der Leinwand, sollte es gut passen.

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

Answer 1

Ich fand dieses "Feature" auch ein bisschen ärgerlich. Es scheint, dass Sie CSS nicht verwenden möchten, um die Eigenschaften width und height für das Element canvas festzulegen. Hängen Sie das canvas-Element mit Attributen (statt CSS) an und die Dimensionen sollten sich selbst korrigieren.

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

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