텍스트 그리기
이전 챕터에서 스타일과 컬러를 적용하는 방법에 대해서 보았고 이번에는 캔버스에 텍스트를 그리는 방법에 대해서 볼 예정입니다.
텍스트 그리기
캔버스 렌더링 컨텍스트(canvas rendering context)는 텍스트를 렌더링하는 두 가지 방법을 제공합니다.
fillText(text, x, y [, maxWidth])
-
주어진 (x, y) 위치에 주어진 텍스트를 채웁니다. 최대 폭(width)은 옵션 값 입니다.
strokeText(text, x, y [, maxWidth])
-
주어진 (x, y) 위치에 주어진 텍스트를 칠(stroke)합니다. 최대 폭(width)은 옵션 값 입니다.
fillText
예제
텍스트는 현재의 fillStyle
을 사용하여 채워집니다.
function draw() {
var ctx = document.getElementById("canvas").getContext("2d");
ctx.font = "48px serif";
ctx.fillText("Hello world", 10, 50);
}
strokeText
예제
텍스트는 현재의 strokeStyle
을 이용하여 채워집니다.
function draw() {
var ctx = document.getElementById("canvas").getContext("2d");
ctx.font = "48px serif";
ctx.strokeText("Hello world", 10, 50);
}
텍스트 스타일 적용하기
위의 예제에서 우리는 이미 텍스트를 기본 사이즈를 키우기 위하여 font
프로퍼티를 사용하였습니다. 그리고 캔버스에 표시되는 텍스트를 조정할 수 있는 속성이 더 있습니다.
font = value
-
텍스트를 그릴 때 사용되는 현재 텍스트 스타일. 이 문자열은 CSS
font
프로퍼티와 동일한구문을 사용합니다. 기본값으로 sans-serif의 10px가 설정되어 있습니다. textAlign = value
-
텍스트 정렬 설정. 사용가능한 값:
start
,end
,left
,right
,center
. 기본 값은start
입니다. textBaseline = value
-
베이스라인 정렬 설정. 사용가능한 값:
top
,hanging
,middle
,alphabetic
,ideographic
,bottom
. 기본 값은alphabetic
입니다 direction = value
-
글자 방향. 사용가능한 값:
ltr
,rtl
,inherit
. 기본 값은inherit
입니다.
만약 CSS를 다뤄보신적이 있다면 이러한 프로퍼티들은 익숙하실겁니다.
다음에 나오는 WHATWG 예제 다이어그램은 textBaseline
를 이용하여 다양한 베이스라인 설정을 보여줍니다.
textBaseline 예제
아래의 코드를 수정하여 캔버스에서 어떻게 바뀌는지 실시간으로 확인해 보세요.
ctx.font = "48px serif";
ctx.textBaseline = "hanging";
ctx.strokeText("Hello world", 0, 100);
어드밴스드 텍스트 측정
만약 텍스트에대해 조금 더 디테일한 것들을 얻고 싶다면 다음의 메소드를 이용해보세요.
measureText()
-
현재 스타일로 특정 텍스트가 그려질 때의 폭, 픽셀 등을 포함하는
TextMetrics
객체 리턴.
다음의 코드는 어떻게 텍스트를 측정하는 지, 그리고 폭을 구하는 예제입니다.
function draw() {
var ctx = document.getElementById("canvas").getContext("2d");
var text = ctx.measureText("foo"); // TextMetrics object
text.width; // 16;
}
Gecko 사용시 주의점
Gecko(Firefox, Firefox OS외 Mozilla 기반의 에플리케이션 렌더링 엔진)에서는 캔버스에 텍스트를 그리기 위한 몇몇의 prefixed APIs가 구현되어 있습니다. 그리고 지금은 사용되지 않아 제거되었거나 작동을 보장하지 않는 것들도 있습니다.