HTML 캔버스의 fillRect() 메서드는 웹 페이지에 색이 채워진 사각형을 그릴 때 사용하는 대표적인 Canvas API입니다. 별도의 색상을 지정하지 않으면 기본적으로 검은색으로 채워지며, JavaScript와 함께 사용하면 웹 페이지 위에 자유롭게 그래픽을 그릴 수 있습니다.
<canvas> 요소는 HTML5에서 도입된 그래픽 컨테이너로, 자체적으로 그리기 기능을 수행하지 않고 반드시 JavaScript를 통해 도형, 이미지, 텍스트 등을 렌더링해야 합니다. 또한 모든 캔버스는 width(가로 크기)와 height(세로 크기)라는 두 가지 속성을 가지며, 이를 통해 캔버스의 실제 그리기 영역 크기를 결정합니다.
fillRect() 메서드 문법
fillRect() 메서드의 기본 문법은 다음과 같습니다.
context.fillRect(p, q, width, height);
각 매개변수의 의미는 아래와 같습니다.
- p – 사각형의 왼쪽 위 꼭짓점 x 좌표
- q – 사각형의 왼쪽 위 꼭짓점 y 좌표
- width – 사각형의 너비
- height – 사각형의 높이
즉, fillRect()는 지정한 좌표를 시작점으로 하여 정의된 너비와 높이만큼의 직사각형 영역을 현재 설정된 fillStyle 색상으로 채웁니다.
fillRect() 메서드 예제
다음은 캔버스 전체를 파란색으로 채운 후, 일부 영역을 투명하게 지우는 clearRect() 메서드를 함께 활용한 예제입니다.
<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="500" height="350" style="border:2px solid orange;">
</canvas>
<script>
var c = document.getElementById("newCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 500, 350);
ctx.clearRect(250, 100, 50, 100);
</script>
</body>
</html>실행 결과
위 예제에서는 먼저 fillStyle 속성을 파란색으로 설정한 뒤, fillRect(0, 0, 500, 350)을 호출하여 캔버스 전체(500×350)를 파란색으로 채웠습니다. 이후 clearRect(250, 100, 50, 100)를 호출하여 해당 좌표 위치의 50×100 크기 영역을 투명하게 지워, 마치 창문처럼 뚫린 효과를 만들어냅니다.
함께 알아두면 좋은 관련 메서드
- strokeRect() – 채우지 않고 테두리 선만 있는 사각형을 그립니다.
- clearRect() – 지정한 사각형 영역의 픽셀을 지워 투명하게 만듭니다.
- fillStyle – 채우기 색상, 그라디언트, 패턴 등을 지정하는 속성입니다.
이 세 가지 메서드를 조합하면 캔버스에서 다양한 형태의 사각형 그래픽을 손쉽게 구현할 수 있습니다.