HTML5 캔버스(Canvas) 텍스트 작성 속성 완벽 정리

HTML5 Canvas로 텍스트를 그리는 핵심 속성

HTML5의 Canvas(캔버스)는 단순히 도형만 그릴 수 있는 것이 아니라, 다양한 스타일의 텍스트를 자유롭게 렌더링할 수 있는 강력한 기능을 제공합니다. 캔버스에서 텍스트를 다룰 때 사용되는 대표적인 속성과 메서드를 하나씩 살펴보겠습니다.

1. font — 글꼴 설정

font 속성은 현재 설정된 글꼴 정보를 반환하며, 값을 지정하여 글꼴을 변경할 수 있습니다. CSS에서처럼 "20px Arial" 또는 "bold 16px sans-serif"와 같은 형식으로 지정합니다.

2. textAlign — 텍스트 정렬

textAlign 속성은 현재 텍스트 정렬 상태를 반환하고, 값을 설정해 정렬 방식을 바꿀 수 있습니다. 사용 가능한 값은 다음과 같습니다.

• start — 시작점 기준 정렬 (기본값)
• end — 끝점 기준 정렬
• left — 왼쪽 정렬
• right — 오른쪽 정렬
• center — 가운데 정렬

3. textBaseline — 텍스트 기준선 정렬

textBaseline 속성은 현재 기준선(baseline) 정렬 상태를 반환하며, 값을 설정하여 기준선을 조절할 수 있습니다. 지원되는 값은 top, hanging, middle, alphabetic, ideographic, bottom입니다. 특히 한글·중문·일본어 같은 표의 문자(ideographic) 환경에서는 ideographic 값이 유용하게 활용됩니다.

4. fillText() — 텍스트 채우기fillText(text, x, y [, maxWidth]) 메서드는 지정된 좌표(x, y) 위치에 주어진 텍스트를 채워서 그립니다. 선택적으로 maxWidth를 지정하면 텍스트가 해당 너비 안에 맞도록 압축됩니다.

5. strokeText() — 텍스트 윤곽선 그리기

strokeText(text, x, y [, maxWidth]) 메서드는 지정된 좌표(x, y) 위치에 주어진 텍스트의 윤곽선(외곽선)을 그립니다. fillText()와 함께 사용하면 채워진 텍스트에 테두리 효과를 줄 수 있어 시각적으로 돋보이는 타이포그래피를 만들 수 있습니다.

속성 요약표