1-4. 텍스트 그리기 - Canvas API | MDN

 

이전 챕터에서 스타일과 컬러를 적용하는 방법에 대해서 보았고 이번에는 캔버스에 텍스트를 그리는 방법에 대해서 볼 예정입니다.

 

 

텍스트 그리기

캔버스 렌더링 컨텍스트(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 : 텍스트를 그릴 때 사용되는 현재 텍스트 스타일. 이 문자열은 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를 이용하여 다양한 베이스라인 설정을 보여줍니다.

 

 

어드밴스드 텍스트 측정

만약 텍스트에대해 조금 더 디테일한 것들을 얻고 싶다면 다음의 메소드를 이용해보세요.

• measureText() : 현재 스타일로 특정 텍스트가 그려질 때의 폭, 픽셀 등을 포함하는 TextMetrics 객체 리턴. 

 

다음의 코드는 어떻게 텍스트를 측정하는 지, 그리고 폭을 구하는 예제입니다.

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var text = ctx.measureText('foo'); // TextMetrics object
  console.log(text.width); // 16;
}

 

 

Gecko 사용시 주의점

Gecko(Firefox, Firefox OS외 Mozilla 기반의 에플리케이션 렌더링 엔진)에서는 캔버스에 텍스트를 그리기 위한 몇몇의 prefixed APIs가 구현되어 있습니다. 그리고 지금은 사용되지 않아 제거되었거나 작동을 보장하지 않는 것들도 있습니다.