HTML5 Canvas로 사각형 그리기 – fillRect() 메서드 완벽 정리

HTML5의 <canvas> 태그는 자바스크립트 같은 스크립트를 사용해 그래픽, 애니메이션 등을 직접 그릴 수 있게 해주는 요소입니다. HTML5에서 새롭게 도입된 태그로, 웹 페이지 위에 자유롭게 도형과 이미지를 렌더링할 때 활용됩니다.

getContext() 메서드란?

canvas 요소에는 getContext라는 DOM 메서드가 내장되어 있습니다. 이 메서드는 렌더링 컨텍스트(rendering context)와 해당 컨텍스트가 제공하는 다양한 드로잉 함수들을 반환합니다. 매개변수로는 컨텍스트의 유형을 전달하며, 2D 그래픽을 그릴 경우 '2d'를 인자로 넘기면 됩니다.

fillRect()로 사각형 그리기

HTML5 캔버스에서 사각형을 그리려면 fillRect(x, y, width, height) 메서드를 사용합니다. 각 매개변수의 의미는 다음과 같습니다.

x, y: 사각형이 시작되는 좌표(캔버스 왼쪽 상단 기준)
width: 사각형의 너비
height: 사각형의 높이

사각형의 색상은 fillStyle 속성으로 지정할 수 있으며, CSS 색상 코드나 색상 이름을 값으로 사용합니다.

예제 코드

아래 예제를 직접 실행하면서 HTML5 Canvas로 사각형을 그리는 방법을 익혀보세요.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 Canvas Tag</title>
   </head>

   <body>
      <canvas id="newCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
      <script>
         var c = document.getElementById('newCanvas');
         var ctx = c.getContext('2d');
         ctx.fillStyle = '#7cce2b';
         ctx.fillRect(0,0,300,100);
      </script>
   </body>
</html>

코드 설명

getElementById()로 캔버스 요소를 가져옵니다.
getContext('2d')를 호출해 2D 드로잉 컨텍스트를 얻습니다.
fillStyle에 초록색 계열인 #7cce2b를 지정합니다.
fillRect(0, 0, 300, 100)으로 좌표 (0,0)부터 너비 300px, 높이 100px 크기의 사각형을 채워 그립니다.

실행 결과

위 코드를 실행하면 검은 테두리 안에 초록색 사각형이 채워진 캔버스가 화면에 나타납니다.