HTML 캔버스의 clearRect() 메서드는 지정된 사각형 영역의 픽셀을 지우는 데 사용됩니다. <canvas> 요소는 JavaScript를 활용해 웹 페이지 위에 그래픽을 자유롭게 그릴 수 있게 해주는 강력한 도구입니다. 모든 캔버스는 크기를 정의하는 두 가지 속성, 즉 width(너비)와 height(높이)를 가지고 있습니다.
clearRect() 메서드 문법
clearRect() 메서드의 기본 문법은 다음과 같습니다.
ctx.clearRect(p, q, width, height);
각 매개변수의 의미는 아래와 같습니다.
- p: 지울 사각형의 왼쪽 위 모서리 x좌표
- q: 지울 사각형의 왼쪽 위 모서리 y좌표
- width: 지울 사각형의 너비
- height: 지울 사각형의 높이
즉, clearRect()는 시작 좌표 (p, q)에서부터 지정한 너비와 높이만큼의 영역을 투명하게 만들어, 그려져 있던 내용을 지우는 역할을 합니다.
clearRect() 메서드 예제
이제 clearRect() 메서드를 실제로 구현한 예제를 살펴보겠습니다.
예제 코드
<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="500" height="350" style="border:2px solid blue;">
</canvas>
<script>
var c = document.getElementById("newCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, 500, 350);
ctx.clearRect(250, 100, 50, 100);
</script>
</body>
</html>코드 설명
위 예제의 동작 순서는 다음과 같습니다.
- 먼저 500×350 크기의 캔버스를 생성하고 파란색 테두리를 지정합니다.
fillStyle을 회색으로 설정한 뒤,fillRect()로 캔버스 전체를 회색으로 채웁니다.- 마지막으로
clearRect(250, 100, 50, 100)을 호출하여 좌표 (250, 100)에서 시작하는 너비 50, 높이 100 크기의 사각형 영역을 투명하게 지웁니다.
실행 결과
코드를 실행하면 회색으로 채워진 캔버스 가운데에 사각형 모양의 투명한 영역이 생기는 것을 확인할 수 있습니다.
정리
clearRect() 메서드는 캔버스의 특정 영역만 선택적으로 지울 수 있어 애니메이션이나 그리기 도구를 구현할 때 매우 유용합니다. 캔버스 전체를 지우고 싶다면 clearRect(0, 0, canvas.width, canvas.height)처럼 캔버스 전체 크기를 지정하면 됩니다.