HTML 캔버스(Canvas)의 rect() 메서드는 지정한 위치와 크기에 사각형 경로를 생성할 때 사용합니다. <canvas> 요소를 활용하면 JavaScript만으로 웹 페이지 위에 다양한 그래픽을 자유롭게 그릴 수 있습니다.
캔버스 요소는 width와 height 속성을 통해 그리기 영역의 너비와 높이를 정의하며, 이 영역 안에서 여러 도형과 이미지를 조합해 복잡한 그래픽도 구현할 수 있습니다.
rect() 메서드 문법
context.rect(p, q, width, height);
매개변수 설명
- p: 사각형 왼쪽 위 모서리의 x 좌표
- q: 사각형 왼쪽 위 모서리의 y 좌표
- width: 사각형의 너비
- height: 사각형의 높이
참고: rect() 메서드는 사각형의 경로(path)만 정의할 뿐 실제로 화면에 그려지지 않습니다. 도형을 화면에 표시하려면 이후에 fill()(색 채우기) 또는 stroke()(테두리 그리기) 메서드를 반드시 호출해야 합니다.
rect() 메서드 사용 예제
다음은 캔버스에서 rect() 메서드를 활용해 두 개의 사각형을 겹쳐 그리는 예제입니다.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="450" height="350" style="border:2px solid blue;">
브라우저가 HTML5 canvas 태그를 지원하지 않습니다.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// 첫 번째 사각형 (주황색)
ctx.beginPath();
ctx.rect(100, 60, 200, 200);
ctx.fillStyle = "orange";
ctx.fill();
// 두 번째 사각형 (노란색)
ctx.beginPath();
ctx.rect(110, 90, 180, 120);
ctx.fillStyle = "yellow";
ctx.fill();
</script>
</body>
</html>실행 결과
위 코드를 실행하면 파란색 테두리 안에 주황색 큰 사각형이 먼저 그려지고, 그 위에 노란색 작은 사각형이 겹쳐져 표시됩니다. 각 사각형을 그리기 전에 beginPath()를 호출해 새로운 경로를 시작하는 점에 유의하세요. 이렇게 하면 이전 도형과 경로가 섞이지 않고 독립적으로 도형을 관리할 수 있습니다.