HTML5 캔버스에서 큰 글꼴 텍스트 스트로크 그리기

HTML5 Canvas에서 큰 글꼴 텍스트에 스트로크 적용하기

HTML5 Canvas에서 큰 크기의 글꼴을 제대로 표현하려면 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);

주요 속성 설명

font: 글자 크기와 서체를 지정합니다. 위 예제에서는 180pt 크기의 Georgia 서체를 사용했습니다.

strokeStyle: 텍스트 외곽선의 색상을 정합니다. 여기서는 빨간색(#FF0000)이 적용됩니다.

fillStyle: 텍스트 내부를 채우는 색상으로, 흰색(#FFFFFF)으로 설정되어 있습니다.

lineWidth: 외곽선의 두께를 결정합니다. 값이 클수록 굵은 테두리가 만들어집니다.

실행 결과

코드를 실행하면 빨간색 굵은 테두리와 흰색 내부를 가진 'Demo!'라는 대형 텍스트가 캔버스에 나타납니다. 이처럼 fillText()로 먼저 텍스트를 채운 뒤 strokeText()로 외곽선을 덧그리면, 큰 글꼴에서도 가독성이 좋고 선명한 텍스트 효과를 얻을 수 있습니다.