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

[Anonymous]

Я работаю над проектом HTML5 Canvas, в котором я динамически генерирую текст и хочу, чтобы он вёл себя как амбиграмма (текст должен выглядеть одинаково после поворота холста на 180 градусов).
Моя цель:

• Отобразить текст на холсте HTML
• Повернуть холст на 180 градусов
• Текст должен оставаться визуально идентичным (стиль амбиграммы)
• Экспортируйте результат в формате PNG с помощью Canvas.toDataURL()

В настоящее время обычный текст отображается нормально, но после поворота:

• Выравнивание нарушается ИЛИ
• Экспортированный PNG становится пустым/белым ИЛИ
• Повернутый текст визуально не соответствует оригиналу

Вот упрощенный пример моего текущего кода:

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

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);

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

Вопросы:

• Правильен ли поворот холста на 180 градусов для создания текста в стиле амбиграммы?
• Следует ли создавать амбиграммы с использованием специальных шрифтов амбиграмм вместо вращения?
• Как правильно экспортировать повернутое содержимое холста, не получая пустое изображение?

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