为什么未触发img的onload事件？

Question

我在onload创建的图像上附加了一个new image();事件 但是onload事件似乎从未触发过。触发console.log时应运行的函数内部的onload永远不会显示。

我还尝试使用addEventListener代替.onload。但它也不起作用。

function init(){
    var main_canvas = document.getElementById('main_canvas');
    var bg_canvas = document.getElementById('background_canvas');

    if(main_canvas.getContext){
        var ctx = main_canvas.getContext('2d');
        var bg_ctx = bg_canvas.getContext('2d');

        let ball = new Image();   
        let box = new Image();

        console.log(ball);
        ball.onload = function() {
            console.log('positiv');
            bg_ctx.drawImage(box,150,100);
            bg_ctx.drawImage(box,150,600);
            ctx.drawImage(ball,350,125);
        }
        ball.src = 'ball.png';
        box.src = 'box.png';
    }
}

window.addEventListener('load', init);

预期的输出应为：1）（由于console.log(ball);的影响）。

2）输出：positiv（因为触发了ball.onload，但从未发生！