HTML5 Canvas가 빈 이미지를 다운로드하는 이유 (그리고 해결 방법)

Source: Dev.to

작동하는 부분

• 스크린에 앰비그램 텍스트가 보입니다.
• 캔버스 요소가 존재하고 올바른 크기를 표시합니다.
• 다운로드 기능이 올바르게 트리거됩니다.

작동하지 않는 부분

• canvas.toDataURL()가 빈 흰색 이미지를 반환합니다.
• 캔버스에 그린 텍스트가 다운로드된 이미지에 나타나지 않습니다.

가능한 원인

• 텍스트를 그리기 전에 웹 폰트가 완전히 로드되지 않음.
• 캔버스 내용이 CSS 변형(회전/스케일)으로 그려짐.
• 그리기가 다운로드되는 캔버스와 다른 캔버스에서 이루어짐.
• 캔버스 너비/높이 불일치.

간소화된 코드

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

질문

다음 사항을 보장하는 올바른 방법은 무엇인가요:

• 생성된 앰비그램 텍스트가 실제로 캔버스에 그려지는지.
• 웹 폰트가 내보내기 전에 완전히 로드되는지.
• 다운로드된 캔버스 이미지가 화면에 표시되는 것과 일치하는지?

조언이나 모범 사례가 있으면 감사하겠습니다.

Related site: ambigramtools.com