Экспорт изображения холста возвращает пустой вывод после генератора амбиграмм ⇐ Javascript

[Anonymous]

У меня есть веб-сайт WordPress (ambigramtools.com), на котором я генерирую текст амбиграммы с использованием холста HTML5 и JavaScript.
Проверьте URL-адрес проблемы: - https://ambigramtools.com/
Амбиграмма отображается правильно на экране после создания, но когда я пытаюсь загрузить холст в виде изображения, загруженный файл полностью белый/пустой. Сгенерированный текст амбиграммы не включается в загруженный холст.
Что работает

• Текст амбиграммы виден на экране
• Элемент Canvas существует и имеет правильный размер
• Функция загрузки срабатывает правильно

Что НЕ работает

• Код: Выделить всё

  canvas.toDataURL()

  возвращает пустое белое изображение
• Текст, нарисованный на холсте, не отображается в загруженном изображении

Возможные причины, которые я подозреваю

• Веб-шрифты не полностью загружаются перед рисованием текста
• Содержимое холста рисуется с помощью преобразований CSS (повернуть/масштабировать)
• Рисование происходит на холсте, отличном от загружаемого
• Несоответствие ширины и высоты холста

Упрощенный код

Код: Выделить всё

const canvas = document.getElementById("ambigramCanvas");
const ctx = canvas.getContext("2d");

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.font = "40px AmbigramFont";
ctx.textAlign = "center";
ctx.fillStyle = "#000";
ctx.fillText("TEST", canvas.width / 2, canvas.height / 2);

function downloadCanvas() {
const link = document.createElement("a");
link.download = "ambigram.png";
link.href = canvas.toDataURL("image/png");
link.click();
}

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