캔버스 크기에 따른 HTML5 캔버스 글꼴 크기 자동 조절
HTML5 캔버스에서 텍스트를 다룰 때는 캔버스의 크기가 달라지면 글꼴 크기도 이에 비례해 조절해야 합니다. 그렇지 않으면 캔버스가 작아졌을 때 텍스트가 잘리거나, 커졌을 때 지나치게 작게 보이는 문제가 발생합니다. 이번 글에서는 캔버스 너비를 기준으로 글꼴 크기를 자동으로 확장·축소하는 방법을 예제와 함께 살펴보겠습니다.
예제 시나리오
기준이 되는 캔버스 크기와 글꼴 크기는 다음과 같습니다.
캔버스: 800px / 글꼴 크기: 60px
즉, 캔버스 너비가 800px일 때 글꼴은 60px로 표시되며, 캔버스 크기가 변하더라도 이 비율(60 ÷ 800 = 0.075)을 그대로 유지하도록 계산하는 것이 핵심입니다.
글꼴 크기 비례 계산 코드
아래 코드는 캔버스 너비에 따라 글꼴 크기를 동적으로 계산하는 getFont() 함수입니다.
var fontBase = 800; // 기준 캔버스 너비
var fontSize = 60; // 기준 글꼴 크기
function getFont() {
var ratio = fontSize / fontBase; // 글꼴 비율 계산
var cSize = canvas.width * ratio; // 현재 캔버스 너비에 비율 적용
return (cSize |0) + 'px sans-serif'; // 정수로 변환 후 폰트 문자열 반환
}코드 설명
- fontBase: 글꼴 크기가 정의된 기준 캔버스 너비입니다.
- fontSize: 기준 캔버스에서 사용할 글꼴 크기입니다.
- ratio: fontSize를 fontBase로 나눈 값으로, 캔버스 크기 대비 글꼴의 상대적 비율입니다.
- cSize: 현재 캔버스 너비에 비율을 곱해 실제 적용할 글꼴 크기를 구합니다.
- (cSize |0): 비트 OR 연산자를 활용해 소수점 이하를 버리고 정수로 변환합니다.
사용 방법
텍스트를 그릴 때 아래와 같이 ctx.font에 반환값을 지정하면 됩니다.
ctx.font = getFont();
ctx.fillText('Hello Canvas', 50, 100);이렇게 구현하면 캔버스 너비가 400px로 줄어들면 글꼴도 자동으로 30px로 축소되고, 1600px로 늘어나면 120px로 확대됩니다. 결과적으로 캔버스 크기와 관계없이 항상 일관된 비율의 텍스트를 유지할 수 있어 반응형 캔버스 UI를 만들 때 매우 유용합니다.