HTML5 캔버스에서 strokeText()로 텍스트 그리는 방법 완벽 정리

HTML5 캔버스(Canvas)에 텍스트를 그릴 때는 strokeText() 메서드를 사용합니다. 이 메서드는 지정된 x, y 좌표 위치에 주어진 텍스트의 외곽선(outline)을 그려주며, 별도로 색상을 지정하지 않으면 기본색인 검정으로 렌더링됩니다.

strokeText() 문법

strokeText(text, x, y [, maxWidth])

매개변수 설명


번호	매개변수	설명
1	text	캔버스에 그릴 텍스트 내용입니다.
2	x	텍스트 그리기를 시작할 x 좌표입니다.
3	y	텍스트 그리기를 시작할 y 좌표입니다.
4	maxWidth	텍스트가 차지할 수 있는 최대 너비(픽셀 단위)로, 선택 사항입니다.

HTML5 캔버스에서 strokeText()로 텍스트 그리는 방법 완벽 정리

참고로 strokeText()는 텍스트의 외곽선만 그리므로, 선 색상은 fillStyle이 아닌 strokeStyle 속성으로 지정하는 것이 좋습니다. 반대로 채워진 텍스트를 원한다면 fillText() 메서드를 사용하면 됩니다.

예제

아래 코드를 실행하면 HTML5 캔버스에서 strokeText()를 활용해 텍스트를 그리는 결과를 직접 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 Canvas strokeText()</title>
   </head>
   <body>
      <canvas id="newCanvas" width="400" height="150" style="border:1px solid #000000;">
      </canvas>
      <script>
         var c = document.getElementById("newCanvas");
         var ctxt = c.getContext("2d");
         ctxt.fillStyle = '#00F';
         ctxt.font = "20px Georgia";
         ctxt.strokeText("Tutorialspoint", 10, 50);
         ctxt.fillStyle = '#Cff765';
         ctxt.font = "30px Verdana";
         ctxt.strokeText("Simply Easy Learning!", 10, 90);
      </script>
   </body>
</html>

위 예제에서는 먼저 getContext("2d")로 2D 드로잉 컨텍스트를 가져온 뒤, font 속성으로 글꼴과 크기를 설정하고 각각 다른 좌표에 두 개의 텍스트 외곽선을 그렸습니다. 이처럼 strokeText()를 활용하면 캔버스 위에 자유롭게 윤곽선 텍스트를 표현할 수 있습니다.