Загрузка динамически созданного холста пуста

Question

У меня проблемы с загрузкой динамически созданного холста. Я хочу, чтобы пользователь мог создавать изображение SVG и загружать его как растровое изображение. Чтобы добиться этого, я создаю холст и рисую на нем свое изображение SVG. Тогда я хочу скачать его. Тем не менее, холст пуст. Теперь я знаю, что это, вероятно, потому, что холст еще не полностью загружен, но присоединение слушателя onload к canvas не сработало, поскольку оно никогда не срабатывало.

При повторном нажатии на ссылку загружается правильное изображение, еще один намек на то, что это проблема с синхронизацией. Может кто-нибудь сказать мне, почему onload никогда не срабатывает? Возможно, я неправильно понимаю, как обрабатывается событие или что его вызывает.

document.getElementById('downloadDirectly').addEventListener('click', function () {
    downloadDirectly();
});

document.getElementById('downloadOnLoad').addEventListener('click', function () {
    downloadOnLoad();
});

function createCanvas() {
    var img = new Image();
    img.src = 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000"><line x1="0" y1="0" x2="500" y2="500" stroke="black" stroke-width="5"/></svg>';

    var canvas = document.createElement('canvas');
    canvas.width = 1000;
    canvas.height = 1000;
    canvas.getContext('2d').drawImage(img, 0, 0, 1000, 1000, 0, 0, 1000, 1000);
    return canvas;
}

function downloadDirectly() {
    let canvas = {};
    canvas = createCanvas();
    let el = document.getElementById('downloadDirectly');
    el.href = canvas.toDataURL();
    console.log('This downloads, but canvas is not ready');
    el.download = name + ".png";
}

function downloadOnLoad() {
    let canvas = {};
    canvas = createCanvas();
    canvas.onload = function() {
        console.log('This is never reached :(');
        let el = document.getElementById('downloadOnLoad');
        el.href = canvas.toDataURL();
        el.download = name + ".png";
    };
}

<p><a id="downloadDirectly">Download directly</a></p>
<p><a id="downloadOnLoad">Download using onLoad</a></p>