이상한 HTML5 Canvas drawImage 동작

HTML5 캔버스를 사용하는 코드를 작성 중입니다. 일반적으로 잘 작동하지만 지금은 매우 이상한 행동을 발견했습니다. 이상한 점은 다른 브라우저에서 일관성이 있다는 것입니다. 그래서 내가 잘못한 것을 이해해야합니다 ... 문서에도 불구하고 내가하고있는 일을 정확하게 말하고있는 것 같습니다. 다음은 코드입니다 (오브젝트 메소드입니다).

  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를 다시 사용하여이 요소를 이미 페이지에있는 Div에 추가합니다 (비어 있음). 결과는 이미지가 너비보다 10 배 이상 늘어난 것입니다 .... drawImage에 대해 이해 한 결과 w와 h 값을 사용하여 이미지의 크기를 조정하고 w와 h가 캔버스의 크기와 잘 맞아야합니다.

내가 뭘 잘못하고 있니? 렌더링 된 DOM 트리에서 그림을 그리기 때문입니까?