在画布上绘制时忽略img对象的宽度和高度

Question

我在绘制画布之前更改图像对象的宽度和高度：

        earth.onload = function () {
            this.width = 50;
            this.height = 50;
        }
        earth.src = 'images/earth-transparent.png';

        // and later on

        function drawPlanet(xCenter, yCenter, radius, speed, img) {
            var ms = time.getSeconds() * 1000 + time.getMilliseconds();
            var angle = ((2 * Math.PI) / (speed * 1000) * ms);
            var xDelta = radius * Math.sin(angle);
            var yDelta = radius * Math.cos(angle);
            var x = xCenter + xDelta;
            var y = yCenter + yDelta;
            ctx.drawImage(img, x - img.width / 2, y - img.height / 2, img.width, img.height);
        }
        var time = new Date();
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.strokeStyle = 'rgba(0,153,255,0.4)';
        ctx.save();
        drawPlanet(300, 300, 200, 6, earth);

（在setInterval的回调中调用drawPlanet，因此图像的加载事件已经触发）不幸的是，正在绘制的图像的大小是原始图像。当我在调试器中输出宽度和高度时，它们的值为50.为什么会这样？