Strano comportamento HTML5 Canvas drawImage

Question

Sto scrivendo un codice che utilizzi HTML5 canvas. In generale funziona bene, ma ora ho trovato un comportamento molto strano. La cosa strana è che è costante su diversi browser, in modo deve essere che ho capito il male cosa ... Nonostante i documenti sembrano dire esattamente quello che sto facendo. Ecco il codice (si tratta di un metodo di un oggetto):

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

Dopo questo userò di nuovo jQuery per aggiungere questo elemento a un Div che è già nella pagina (che è vuota). Il risultato sarà che l'immagine viene superata come dieci volte la sua larghezza .... Cioè strano perché, per quello che ho capito di drawImage, dovrebbe utilizzare le L e valori per ridimensionare l'immagine e dato che w e h sono la dimensioni della tela, che dovrebbe adattarsi bene.

Che cosa sto facendo di sbagliato? E 'perché faccio il disegno fuori l'albero DOM reso?

Answer 1

Ho trovato questo "caratteristica", oltre ad essere un po 'fastidioso. Sembra come se non si vuole usare i CSS per impostare le proprietà di larghezza e altezza per l'elemento canvas. Aggiungere l'elemento tela con attributi (anziché CSS) e le dimensioni devono correggere stessi.

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

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