마우스 오버 시 HTML5 캔버스 사각형 업데이트하는 방법

HTML5 캔버스(Canvas)에서 그려진 사각형에 마우스를 올렸을 때(hover) 색상이 채워지도록 업데이트하려면, hover 이벤트와 fill() 메서드를 함께 활용하면 됩니다.

기본 원리

먼저 getContext("2d")로 캔버스 드로잉 컨텍스트를 가져온 뒤, rect() 메서드로 사각형의 위치와 크기를 정하고 stroke()로 외곽선을 그립니다. 이후 jQuery의 hover() 함수를 사용해 마우스가 캔버스 위에 올라왔을 때 fillStyle로 채우기 색상을 지정하고 fill()을 호출하면 사각형 내부가 해당 색으로 채워집니다.

예제 코드

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

// 사각형 좌표(20, 20)와 크기(150 x 100) 지정 후 외곽선 그리기
context.rect(20, 20, 150, 100);
context.stroke();

// 마우스 오버 시 사각형 내부를 파란색으로 채우기
$(canvas).hover(function(e){
    context.fillStyle = "blue";
    context.fill();
});

코드 설명

• getElementById("myCanvas"): HTML 문서에서 id가 "myCanvas"인 캔버스 요소를 선택합니다.
• getContext("2d"): 2D 그래픽을 그릴 수 있는 드로잉 컨텍스트 객체를 반환합니다.
• rect(20, 20, 150, 100): x=20, y=20 위치에 가로 150px, 세로 100px 크기의 사각형 경로를 생성합니다.
• stroke(): 현재 경로에 외곽선을 그립니다.
• hover(): 마우스 포인터가 캔버스 영역에 진입했을 때 지정한 콜백 함수를 실행합니다.
• fillStyle과 fill(): 채우기 색상을 설정한 뒤 현재 경로의 내부를 색으로 채웁니다.

주의 사항

fillStyle에는 반드시 문자열 형태의 유효한 CSS 색상 값을 지정해야 합니다. 예를 들어 "blue", "#0000ff", "rgb(0, 0, 255)" 등을 사용할 수 있습니다. 따옴표 없이 변수처럼 작성하면 정의되지 않은 변수로 인식되어 오류가 발생할 수 있으니 주의하세요.

또한 마우스가 캔버스를 벗어날 때 원래 상태로 되돌리고 싶다면 hover()의 두 번째 콜백에서 clearRect()로 캔버스를 지운 뒤 다시 그려주는 방식을 활용할 수 있습니다.