개요
HTML5 Canvas에서 원 안에 텍스트를 그리려면 context.beginPath() 메서드로 새로운 경로를 시작한 뒤, 원을 그리고 그 위에 텍스트를 렌더링하면 됩니다. 이 글에서는 클릭한 위치에 파란색 원을 그리고, 그 중앙에 흰색 텍스트를 배치하는 실제 예제를 단계별로 살펴봅니다.
원 안에 텍스트 그리기 예제
다음은 jQuery의 클릭 이벤트를 활용해 캔버스 위를 클릭하면 해당 좌표에 원과 텍스트를 함께 그리는 자바스크립트 코드입니다.
$("#demo").on("click", "#canvas1", function(event) {
var canvas = document.getElementById('canvas1');
if (canvas.getContext) {
var context = canvas.getContext("2d");
var w = 25;
var x = event.pageX;
var y = Math.floor(event.pageY - $(this).offset().top);
// 원 그리기
context.beginPath();
context.fillStyle = "blue";
context.arc(x, y, w/2, 0, 2 * Math.PI, false);
context.fill();
// 텍스트 그리기
context.font = '9pt Arial';
context.fillStyle = 'white';
context.textAlign = 'center';
context.fillText('amit', x, y + 4);
}
});코드 설명
- beginPath(): 새로운 경로를 시작해 이전 그리기 작업과 분리합니다. 도형이 서로 섞이지 않도록 반드시 호출해야 합니다.
- arc(x, y, w/2, 0, 2π, false): 클릭한 좌표(x, y)를 중심으로 반지름이 w/2인 완전한 원을 그립니다. 시작 각도 0부터 2π(360도)까지 회전하며 원 전체를 만듭니다.
- fill(): fillStyle로 지정한 파란색(blue)으로 원 내부를 채웁니다.
- font: 텍스트의 글꼴 크기와 서체를 지정합니다.
- textAlign = 'center': 텍스트가 x 좌표를 기준으로 가로 방향 가운데 정렬되도록 합니다.
- fillText('amit', x, y+4): 지정된 위치에 텍스트를 그립니다. y에 4px를 더해 텍스트를 원의 세로 중앙 근처에 맞춥니다.
HTML 마크업
캔버스 요소는 다음과 같이 demo라는 id를 가진 컨테이너 div 안에 배치합니다.
<div id="demo">
<canvas id="canvas1"></canvas>
</div>
추가 팁: 세로 중앙 정렬
y 좌표를 임의로 보정하는 대신 context.textBaseline = 'middle' 속성을 함께 설정하면 텍스트를 원의 정확한 세로 중앙에 배치할 수 있습니다. 이 경우 fillText('amit', x, y)만 호출해도 됩니다. 또한 여러 개의 원과 텍스트를 반복해서 그릴 때는 매번 beginPath()를 호출해 경로를 초기화하는 것이 좋습니다.