HTML5 캔버스에서 차트를 깨끗하게 지우고 호버 이벤트가 발생하지 않도록 하는 방법

개요

캔버스에 그려진 차트를 초기화할 때 단순히 clearRect() 메서드만 사용하면 기존 이벤트 리스너나 내부 상태가 그대로 남아 있어, 마우스를 올릴 때(hover) 의도치 않은 이벤트가 계속 트리거되는 문제가 발생할 수 있습니다.

이를 확실하게 해결하는 가장 간단한 방법은 기존 <canvas> 요소 자체를 삭제하고, 부모 컨테이너에 새로운 <canvas> 요소를 다시 추가하는 것입니다. 이렇게 하면 기존 캔버스에 연결되어 있던 모든 이벤트 핸들러와 상태 정보가 함께 제거됩니다.

구현 코드

아래 코드는 캔버스를 제거하고 새로 생성한 뒤, 부모 컨테이너의 크기에 맞게 조정하고 텍스트를 렌더링하는 예제입니다.

var resetCanvas = function(){
    // 기존 캔버스 요소 삭제
    $('#results-graph').remove();

    // 부모 컨테이너에 새 캔버스 추가
    $('#graph-container').append('<canvas id = "results-graph"></canvas>');
    canvas = document.querySelector('#results-graph');

    // 새 캔버스의 2D 컨텍스트 가져오기
    ct = canvas.getContext('2d');

    // 부모 요소 크기에 맞춰 캔버스 크기 조정
    ct.canvas.width = $('#graph').width();
    ct.canvas.height = $('#graph').height();

    // 중앙 좌표 계산 후 텍스트 출력
    var a = canvas.width / 2;
    var b = canvas.height / 2;

    ct.font = '12pt Calibri';
    ct.textAlign = 'left';
    ct.fillText('left aligned text on the canvas', a, b);
};

코드 설명

위 코드의 동작 순서를 살펴보면 다음과 같습니다.

1. 기존 캔버스 제거: jQuery의 remove() 메서드를 사용해 DOM에서 <canvas> 요소를 완전히 삭제합니다. 이 과정에서 해당 캔버스에 등록된 hover 이벤트까지 함께 사라집니다.

2. 새 캔버스 생성: 같은 ID를 가진 새로운 <canvas> 요소를 부모 컨테이너인 #graph-container에 추가합니다.

3. 컨텍스트 재설정: getContext('2d')로 새 캔버스의 드로잉 컨텍스트를 얻고, 부모 요소의 너비와 높이에 맞게 캔버스 크기를 조정합니다.

4. 콘텐츠 다시 그리기: 폰트와 정렬을 설정한 후 원하는 텍스트나 차트를 새 캔버스에 렌더링합니다.

참고 사항

Chart.js와 같은 차트 라이브러리를 사용하는 경우라면, 위 방법 외에도 chart.destroy() 메서드를 호출해 차트 인스턴스를 완전히 파괴한 후 새 차트를 생성하는 방식을 권장합니다. 이는 메모리 누수를 방지하고 이벤트 충돌 문제를 근본적으로 해결할 수 있습니다.