Three.Js：drawImage剪切原始png

Question

例如我有一个301x278 png图像，我想像这样绘制它：

    var canvas2 = document.createElement('canvas');
    var context2 = canvas2.getContext('2d');

    var texture2 = new THREE.Texture(canvas2);

    var material2 = new THREE.MeshBasicMaterial( {map: texture2, side:THREE.DoubleSide} );

    var imageObj = new Image();
    imageObj.src = "test.png";

    imageObj.onload = function()
    {
        context2.drawImage(imageObj, 0, 0, 301, 278)
    };

    var mesh2 = new THREE.Mesh(
        new THREE.PlaneGeometry(301, 278),
        material2
    );

但不幸的是，实际上只显示了一半的图像。我该如何解决？