HTML5 캔버스 요소에서 텍스트 높이 측정하는 방법

HTML5 캔버스에서 텍스트 높이 측정하기

HTML5 캔버스(Canvas)에서 텍스트를 그릴 때, 텍스트의 세로 크기(높이)를 정확히 알아야 하는 경우가 자주 있습니다. 예를 들어 텍스트를 세로 중앙에 정렬하거나, 동적으로 레이아웃을 계산할 때 텍스트 높이 정보가 필요합니다.

캔버스 컨텍스트에는 텍스트 너비를 반환하는 measureText() 메서드는 있지만, 높이를 직접 반환하는 메서드는 없습니다. 이럴 때는 폰트 설정 값에서 숫자(폰트 크기)를 추출하는 방법을 활용할 수 있습니다.

1단계: 폰트를 pt 단위로 설정

먼저 캔버스 컨텍스트에 사용할 폰트를 pt 단위로 지정합니다.

context.font = "15pt Calibri";

폰트 크기를 pt 단위로 명시해 두어야 이후 정규식으로 크기를 손쉽게 분리할 수 있습니다.

2단계: 정규식으로 폰트 크기 추출

다음으로 match() 메서드와 정규식 /\d+/를 사용해 폰트 문자열에서 숫자 부분만 분리한 뒤, parseInt()로 정수형 높이 값을 얻습니다.

var height = parseInt(context.font.match(/\d+/), 10);

여기서 match(/\d+/)는 폰트 문자열에서 첫 번째로 등장하는 연속된 숫자, 즉 폰트 크기(15)를 찾아내고, parseInt(..., 10)은 이를 10진수 정수로 변환합니다. 결과적으로 height 변수에는 15라는 텍스트 높이 값이 저장됩니다.

참고: 더 정밀한 측정이 필요할 때

위 방법은 폰트에 설정된 크기를 기준으로 하므로 간편하지만, 실제 글리프가 차지하는 픽셀 높이와는 다소 차이가 있을 수 있습니다. 보다 정밀한 측정이 필요하다면 최신 브라우저에서 지원하는 measureText()의 actualBoundingBoxAscent와 actualBoundingBoxDescent 속성을 활용하는 것도 좋은 대안입니다.

var metrics = context.measureText("샘플 텍스트");
var textHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;

이처럼 상황에 맞는 방법을 선택하면 캔버스에서 텍스트 높이를 효과적으로 측정하고 활용할 수 있습니다.