GIF-файл создается правильно в браузере, но загруженное изображение пустое (HTML Canvas/JavaScript) ⇐ Html

[Anonymous]

Я работаю над текстовым инструментом на базе WordPress, с помощью которого пользователи могут создавать GIF-файлы для ввода слов с помощью HTML5 Canvas + JavaScript.
GIF корректно отображается в предварительном просмотре браузера, но когда я пытаюсь загрузить сгенерированный GIF/изображение, загруженный файл оказывается пустым (белое изображение).
Что работает
Текстовая анимация правильно отображается на холсте
Предварительный просмотр GIF показывает ожидаемые кадры
/>Нет ошибок JavaScript в консоли.
Проблема.
После нажатия кнопки «Загрузить» сохраненный файл .gif/.png оказывается пустым.
В загруженном изображении холст выглядит пустым.
Предполагаемые причины.
Canvas не полностью отображается перед экспортом.
Асинхронная загрузка шрифтов.
toDataURL() / Кодер GIF вызывается слишком рано
Canvas очищается перед загрузкой
Упрощенный пример кода

Загрузить

const Canvas = document.getElementById("canvas");
const ctx = Canvas.getContext("2d");
ctx.font = "40px Arial";
ctx.fillStyle = "#000";
ctx.fillText("Ввод GIF", 50, 100);
document.getElementById("download").addEventListener("click", () => {
const link = document.createElement("a");
link.download = "text.gif";
link.href = Canvas.toDataURL("image/png");
link.click();
});

Ожидаемое поведение
Загруженное изображение/GIF должно выглядеть точно так же, как при предварительном просмотре холста.
Фактическое поведение
Загруженный файл пуст (белое изображение).
Демо (только для воспроизведения)
https://tinytextmaker.com/typing-words-gif-generator/
Вопрос
Как правильно обеспечить полную визуализацию холста перед экспортом/загрузкой, особенно при создании анимированных GIF-файлов или использовании динамического текста?
Существует ли рекомендуемый шаблон для надежного экспорта GIF-файлов на основе холста?

Подробнее здесь: https://stackoverflow.com/questions/798 ... tml-canvas