HTML5 Canvas에서 소수점(분수) 글꼴 크기 처리하는 방법

HTML5 Canvas에서 소수점 글꼴 크기 처리하기

HTML5 Canvas에서 글꼴 크기에 소수점 값을 지정하면 브라우저에 따라 렌더링 결과가 달라지거나 의도한 대로 표시되지 않는 경우가 있습니다. 특히 확대·축소(zoom) 기능을 구현할 때 ctx.font에 계산된 소수점 픽셀 값이 그대로 적용되지 않아 텍스트가 깨져 보이거나 크기가 어긋나는 문제가 발생할 수 있습니다.

이런 상황에서 유용하게 활용할 수 있는 대표적인 해결 기법을 소개합니다.

핵심 원리

이 기법의 핵심 아이디어는 다음 세 단계로 정리할 수 있습니다.

1. 초기화 시 표준 크기로 렌더링 — 텍스트를 기본(정수) 글꼴 크기로 먼저 그려서 기준 이미지를 만듭니다.
2. 줄 길이 측정 — measureText()를 사용해 렌더링된 텍스트의 실제 폭을 구해 둡니다.
3. 배율을 곱해 재출력 — 숨겨진 캔버스(hidden canvas)에 그린 텍스트를 drawImage()로 메인 캔버스에 옮길 때, 너비에 배율(multiplier)을 곱해 원하는 크기로 조절합니다.

즉, 소수점 글꼴 크기를 직접 지정하는 대신, 정수 크기로 그린 텍스트를 이미지처럼 확대·축소하는 방식입니다. 이렇게 하면 브라우저별 글꼴 렌더링 차이를 피하면서도 부드러운 스케일링 효과를 얻을 수 있습니다.

예제 코드

ctx.font = (font_size * zoom) + "px Georgia";
ctx.fillText(mytext, 0, 0);

var s = (iniLineLength * zoom) / ctx.measureText(mytext);
mainContext.drawImage(tmpCanvas, x, y, pw * s, ph);

코드 설명

• font_size * zoom: 원래 글꼴 크기에 확대 배율을 곱한 값을 적용합니다.
• iniLineLength: 초기화 단계에서 미리 측정해 둔 표준 크기의 텍스트 줄 길이입니다.
• s: 목표 길이와 현재 측정된 길이의 비율로, 출력 시 적용할 스케일 배율입니다.
• drawImage(tmpCanvas, x, y, pw * s, ph): 임시(숨겨진) 캔버스의 내용을 메인 캔버스의 지정 좌표에, 계산된 배율만큼 조절된 크기로 복사합니다.

활용 팁

이 방식은 줌(zoom) 기능이 있는 에디터, 다이어그램 도구, 게임 UI 등에서 텍스트 선명도와 크기 일관성을 유지해야 할 때 특히 유용합니다. 다만 과도하게 확대할 경우 비트맵이 흐릿해질 수 있으므로, 필요하다면 고해상도 원본을 여러 단계로 준비해 두는 것도 좋은 방법입니다.