HTML5 Canvas: как создать текст в стиле амбиграммы после поворота на 180 °? ⇐ Html

[Anonymous]

Я работаю над проектом HTML5 Canvas, в котором динамически генерирую текст
и хочу, чтобы он вёл себя как амбиграмма (текст должен выглядеть одинаково
после поворота холста на 180 градусов).
Моя цель:
- Отобразить текст на холсте HTML
- Повернуть холст на 180 градусов
- Текст должен оставаться визуально идентичным (стиль амбиграммы)
- Экспортируйте результат в формате PNG с помощью Canvas.toDataURL()
В настоящее время обычный текст отображается нормально, но после поворота:
- Выравнивание нарушается ИЛИ
- Экспортированный PNG становится пустым/белым ИЛИ
- Повернутый текст визуально не соответствует оригиналу
Вот упрощенный пример моего текущего кода:
HTML:

JavaScript:
const Canvas = document.getElementById("canvas");
const ctx = Canvas.getContext("2d");
ctx.clearRect(0, 0, Canvas.width, Canvas.height);
ctx.translate(canvas.width / 2, Canvas.height / 2);
ctx.font = "48 пикселей с засечками";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("ПОЛДЕНЬ", 0, 0);
// Поворот холста на 180 градусов
ctx.rotate(Math.PI);
ctx.fillText("ПОЛДЕНЬ", 0, 0);
Вопросы:
1. Является ли поворот холста на 180 градусов правильным методом создания текста в стиле амбиграммы?
2. Следует ли создавать амбиграммы с использованием специальных шрифтов амбиграмм вместо вращения?
3. Каков правильный способ экспорта повернутого содержимого холста без получения пустого изображения?
Я ищу чистый и правильный подход для обработки амбиграммного рендеринга в холсте HTML5.

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