HTML5 캔버스(Canvas)로 원 안에 텍스트 그리기 완벽 가이드

HTML5 캔버스에서 원 안에 텍스트를 표시하려면 context.beginPath() 메서드를 활용해야 합니다. 이 메서드는 새로운 경로를 시작하여 원을 그린 뒤, 그 위에 텍스트를 렌더링할 수 있게 해줍니다.

핵심 원리

원 안에 텍스트를 넣는 과정은 크게 두 단계로 나뉩니다.

1단계: 원 그리기

beginPath()로 새 경로를 시작하고, arc() 메서드로 원을 정의한 후 fill()로 채웁니다.

2단계: 텍스트 추가

fillText() 메서드를 사용해 원의 중심 좌표에 텍스트를 배치합니다. 이때 textAlign 속성을 'center'로 설정하면 텍스트가 원의 중앙에 정렬됩니다.

전체 예제 코드

다음은 클릭 이벤트 발생 시 해당 위치에 파란색 원을 그리고, 그 안에 흰색 텍스트를 표시하는 자바스크립트 예제입니다.

$("#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 = canvas.getContext("2d");
        context.font = '9pt';
        context.fillStyle = 'white';
        context.textAlign = 'center';
        context.fillText('amit', x, y + 4);
    }
});

HTML 구조

위 코드가 동작하기 위해서는 다음과 같은 HTML 마크업이 필요합니다.

<div id="demo">
    <canvas id="canvas1"></canvas>
</div>

코드 설명

• w = 25: 원의 지름을 결정하는 값으로, 반지름은 w/2인 12.5픽셀이 됩니다.
• event.pageX / event.pageY: 클릭된 위치의 화면상 좌표를 가져옵니다.
• offset().top: 캔버스 요소의 상단 위치를 빼주어 캔버스 내부 기준의 y좌표를 계산합니다.
• y + 4: 텍스트가 원의 중앙에 오도록 세로 위치를 약간 조정합니다.

이 예제를 응용하면 클릭할 때마다 동적으로 원과 라벨을 생성하는 인터랙티브한 UI를 손쉽게 만들 수 있습니다.