[JS] Canvas에서 가운데 정렬 텍스트 그리기

 

다양한 방법으로 가운데(중앙) 정렬시킨 텍스트(글자)를 Canvas에 그릴 수 있습니다.

 

첫 번째 코드

const cw = width / 2;
const ch = height / 2;

// 그리는 기준점을 글자의 가운데로
ctx.textAlign = "center"

ctx.fillStyle = "#000";
ctx.fillText( text, cw, ch );
ctx.fill();

글자를 그리기 전에 텍스트의 X 시작점을 가운데로 옮기는 속성을 적용시키면 간단하게 중앙 정렬시킬 수 있습니다.

 

https://www.w3schools.com/tags/canvas_textalign.asp

두 번째 코드

const cw = width / 2;
const ch = height / 2;

// 그릴 텍스트의 넓이 구하기
const textWidth = ctx.measureText(text).width;

ctx.fillStyle = "#000";
ctx.fillText(
  text,
  cw - (textWidth / 2),
  ch
);
ctx.fill();

해당 속성을 사용하게 되면 해당 canvas에는 textAlign 속성이 적용된 상태에서 다른 작업을 하게 됩니다.

이를 방지하기 위해서 속성을 먹이는 방법 대신에, 글자를 그려주는 위치를 중앙으로 지정해주는 방법도 있습니다.

 

measureText 메서드는 글자의 폰트, 크기를 계산하여 넓이를 반환합니다.

이를 사용하여 텍스트에 따른 넓이를 얻을 수 있으며, 캔버스의 넓이에서 글자의 절반을 뺀 값은 텍스트의 중앙이 됩니다.

 

이러한 수식을 사용하는 이유는 textAlign의 기본 속성은 start 이기 때문에 글자 맨 앞이 X의 시작점이 됩니다.