HTML5 캔버스 ctx.fillText()로 줄 바꿈 텍스트 그리는 방법

HTML5 캔버스에서 fillText() 줄 바꿈 문제

HTML5 캔버스의 fillText() 메서드는 캔버스에 채워진(filled) 텍스트를 그리는 기능을 제공합니다. 하지만 이 메서드는 \n과 같은 개행 문자를 자동으로 처리하지 않기 때문에, 텍스트에 줄 바꿈이 포함되어 있어도 한 줄로 이어져 그려집니다.

해결 방법: 텍스트를 분리하여 여러 번 호출하기

줄 바꿈을 구현하려면 텍스트를 개행 문자(\n)를 기준으로 분리한 뒤, 각 줄마다 fillText()를 반복 호출하면 됩니다. 이렇게 하면 텍스트가 여러 줄로 나뉘어 각각 따로 그려지게 됩니다.

아래 코드 예제를 직접 실행해 보세요.

var c = $('#c')[0].getContext('2d');
c.font = '12px Courier';

var str = 'first line \nsecond line...';
var a = 30;          // x 좌표
var b = 30;          // 시작 y 좌표
var lineheight = 15; // 줄 간격
var lines = str.split('\n');

for (var j = 0; j < lines.length; j++)
  c.fillText(lines[j], a, b + (j * lineheight));

캔버스 HTML 마크업

<canvas id="c" width="200" height="200"></canvas>

CSS 스타일

canvas {
  background-color: #FFCE9E;
}

코드 설명

str.split('\n')은 문자열을 개행 문자 기준으로 잘라 배열로 만듭니다. 이후 for 루프를 돌면서 각 줄의 y 좌표에 j * lineheight를 더해 주면, 줄 간격 15px씩 아래로 내려가며 텍스트가 순서대로 그려집니다.

이 방식은 고정된 줄 바꿈뿐 아니라, 텍스트 길이를 측정하는 measureText() 메서드와 함께 사용하면 특정 너비를 초과할 때 자동으로 줄을 바꾸는 워드랩(word wrap) 기능도 구현할 수 있습니다.