HTML5 Canvas: How to generate ambigram-style text same after 180° rotation?

I am working on an HTML5 Canvas project where I generate text dynamically

and want it to behave like an ambigram (the text should look the same

after rotating the canvas by 180 degrees).

My goal:

- Render text on HTML canvas

- Rotate canvas by 180 degrees

- The text should remain visually identical (ambigram-style)

- Export the result as PNG using canvas.toDataURL()

Currently, normal text renders fine, but after rotation:

- Alignment breaks OR

- Exported PNG becomes blank/white OR

- The rotated text does not visually match the original

Here is a simplified example of my current code:

HTML:

<canvas id="canvas" width="300" height="300"\></canvas\>

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

Questions:

1. Is rotating canvas by 180 degrees the correct method for creating ambigram-style text?

2. Should ambigrams be created using special ambigram fonts instead of rotation?

3. What is the correct way to export rotated canvas content without getting a blank image?

I am looking for a clean and correct approach to handle ambigram rendering in HTML5 canvas.