HTML5 Canvas에서 큰 글꼴을 그리는 방법 완벽 정리

HTML5 Canvas에서 큰 글꼴 그리기

HTML5 Canvas에서 큰 글꼴을 제대로 그리려면 font 속성에 원하는 글자 크기와 서체를 지정한 뒤, fillText()와 strokeText() 메서드를 함께 사용하면 됩니다. 아래 예제 코드를 직접 실행해 보세요.

var myCanvas = document.getElementById("myCanvas");

var context = myCanvas.getContext("2d");
context.font = '180pt Georgia';
context.strokeStyle = "#FF0000";
context.fillStyle = "#FFFFFF";
context.lineWidth = 34;

context.fillText("Demo!", 0, 200);
context.strokeText("Demo!", 0, 200);

코드 핵심 요소 살펴보기

• context.font: 글꼴 크기와 서체를 지정합니다. 이 예제에서는 180pt 크기의 Georgia 서체를 사용해 아주 큰 텍스트를 표현했습니다.
• fillStyle & fillText(): 채우기 색상을 흰색(#FFFFFF)으로 설정하고, 지정한 좌표(0, 200)에 텍스트를 채워 그립니다.
• strokeStyle & strokeText(): 빨간색(#FF0000) 윤곽선으로 텍스트의 외곽선을 그려 입체적인 효과를 줍니다.
• lineWidth: 윤곽선의 두께를 34픽셀로 지정해 굵고 강조된 느낌을 연출합니다.

실행 결과 및 주의 사항

위 코드를 실행하면 캔버스에 흰색으로 채워지고 빨간색 굵은 윤곽선이 둘러진 대형 텍스트 "Demo!"가 나타납니다. 참고로 일부 예제에서 c.getContext("2d")처럼 잘못된 변수명을 사용하는 경우가 있는데, 캔버스 요소 변수인 myCanvas를 기준으로 컨텍스트를 가져와야 정상적으로 동작합니다.