Why HTML5 Canvas Downloads a Blank Image (and How to Fix It)

Source: Dev.to

What works

• Ambigram text is visible on screen.
• Canvas element exists and shows the correct size.
• Download function is triggered correctly.

What does NOT work

• canvas.toDataURL() returns a blank white image.
• Text drawn on the canvas does not appear in the downloaded image.

Possible causes

• Web fonts not fully loaded before drawing the text.
• Canvas content is drawn via CSS transforms (rotate / scale).
• Drawing happens on a different canvas than the one being downloaded.
• Canvas width/height mismatch.

Simplified code

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

Question

What is the correct way to ensure that:

• The generated ambigram text is actually drawn into the canvas.
• Web fonts are fully loaded before exporting.
• The downloaded canvas image matches what is visually displayed?

Any guidance or best practices would be appreciated.

Related site: ambigramtools.com