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 = "48px serif";

ctx.textAlign = "center";

ctx.textBaseline = "middle";

ctx.fillText("NOON", 0, 0);

// Rotate canvas 180 degrees

ctx.rotate(Math.PI);

ctx.fillText("NOON", 0, 0);

Вопросы:
1. Является ли поворот холста на 180 градусов правильным методом создания текста в стиле амбиграммы?
2. Следует ли создавать амбиграммы с использованием специальных шрифтов амбиграмм вместо вращения?
3. Каков правильный способ экспорта повернутого содержимого холста без получения пустого изображения?
Я ищу чистый и правильный подход для обработки амбиграммного рендеринга в холсте HTML5.

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