🎲 랜덤 숫자 폰트 적용 - FRONTENDBOOTCAMP-13th/JS-07-7zzang-Arcade GitHub Wiki

구분

• 날짜 : 2025.05.16
• 종류 : 버그
• 중요도 : 🔴

---

1. 문제 상황

폰트는 네트워크에서 잘 불러와지고, HTML에서 적용도 잘 되는데, TS에서 생성한 랜덤하게 생성되는 숫자들한테만 폰트가 적용되지 않는 문제

---

2. 코드 첨부

    ctx.font = `${cellHeight * 0.4}px DungGeunMo`;
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

---

3. 원인

• Canvas API는 텍스트를 그릴 때, 해당 폰트가 '로드 완료 상태'여야 제대로 적용된다.
• HTML의 <p> 요소에선 DungGeunMo가 잘 적용됐지만, canvas에서는 기본 폰트로 출력되었기 때문이었다. canvas가 fillText를 실행할 때, DungGeunMo 폰트가 아직 로딩 중이었기 때문에…

네트워크에서 불러와져도 그리는 타이밍이 더 빨랐기 때문에 한번 그리고 그대로 fix 된 것..

---

4. 해결 과정

폰트 로드가 완료된 이후, fillText하도록 설정해주도록…!!!

그러기 위해 Promise 를 통해 폰트와 이미지가 불러와졌는지 확인한 다음, 로드가 되었다면 코드 실행하도록 코드를 바꿔주면 적용이 잘 된다 ~! 폰트 적용된 거에 맞춰서 크기 조정 위치 조정 다시 해주면 예쁘게 잘 들어가있다.

원래 ..이랬던 녀석이 …. 이렇게 … ㅠㅠ