अजीब HTML5 कैनवास drawImage व्यवहार

Question

मैं कुछ कोड एचटीएमएल 5 कैनवास का उपयोग करता है लिख रहा हूँ। आम तौर पर यह अच्छी तरह से काम करता है, लेकिन अब मुझे एक बहुत अजीब व्यवहार मिला। अजीब चीज यह है कि यह विभिन्न ब्राउज़रों पर सुसंगत है, इसलिए यह होना चाहिए कि मैं गलत बात समझ गया ... दस्तावेज़ों के बावजूद मैं यह कह रहा हूं कि मैं क्या कर रहा हूं।

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

इस मैं jQuery फिर से एक डिव पेज में है कि पहले से ही (जो खाली है) करने के लिए इस तत्व संलग्न करने के लिए इस्तेमाल करेंगे के बाद: यहाँ कोड (यह एक वस्तु विधि है) है। परिणाम होगा कि छवि दस बार की तरह overstretched है यह चौड़ाई है .... यही कारण है कि अजीब है, क्योंकि मैं क्या drawImage की समझ में आ के लिए, छवि को मापना w और ज मूल्यों का उपयोग करें और दिए गए चाहिए w और ज हैं कि कैनवास का आकार, यह अच्छी तरह से फिट होना चाहिए।

मैं क्या गलत कर रहा हूं? क्या ऐसा इसलिए है क्योंकि मैं प्रस्तुत डीओएम पेड़ को चित्रित करता हूं?

Answer 1

मैं इस "सुविधा" के लिए भी एक सा irksome पाया। ऐसा लगता है कि आप कैनवास तत्व के लिए चौड़ाई और ऊंचाई गुण सेट करने के लिए सीएसएस का उपयोग नहीं करना चाहते हैं। गुणों के साथ कैनवास तत्व संलग्न करें (सीएसएस के बजाए) और आयामों को स्वयं को सही करना चाहिए।

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

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