HTML 캔버스 전체를 특정 색상으로 채우고 싶다면 fillRect() 메서드를 사용하면 됩니다. 이 메서드는 지정한 좌표와 크기만큼 단색 사각형을 그려주는 기능을 합니다.
fillRect()로 캔버스 전체 채우기
핵심 아이디어는 간단합니다. 캔버스의 width(너비)와 height(높이) 속성을 활용해 캔버스 전체 크기와 동일한 사각형을 그리는 것입니다. 시작 좌표를 (0, 0)으로 지정하면 캔버스의 왼쪽 상단 모서리부터 색상이 채워집니다.
const canvas = document.getElementById("my-canvas");
const ctx = canvas.getContext("2d");
// 채울 색상 지정
ctx.fillStyle = "blue";
// 캔버스 전체 크기만큼 사각형 그리기
ctx.fillRect(0, 0, canvas.width, canvas.height);동작 원리 살펴보기
위 코드가 어떻게 작동하는지 단계별로 살펴보겠습니다.
1. 캔버스 요소 가져오기
document.getElementById()를 사용해 HTML에서 캔버스 요소를 선택합니다.
<canvas id="my-canvas"></canvas>2. 렌더링 컨텍스트 얻기
getContext("2d")를 호출하면 캔버스에 그림을 그릴 수 있는 2D 드로잉 컨텍스트 객체를 반환받습니다. 모든 캔버스 그리기 작업은 이 컨텍스트를 통해 수행됩니다.
3. 색상 지정 후 사각형 그리기
ctx.fillStyle 속성에 원하는 색상을 설정합니다. 색상 이름("blue") 외에도 헥사 코드(#0000ff)나 RGB 값(rgb(0, 0, 255))도 사용할 수 있습니다. 이후 fillRect(x, y, width, height)를 호출하면 해당 영역이 지정한 색상으로 채워집니다.
마무리
이처럼 fillRect() 메서드와 캔버스의 너비·높이 속성만 있으면 별도의 복잡한 로직 없이도 캔버스 전체를 원하는 색상으로 손쉽게 채울 수 있습니다. 배경색 설정, 게임 화면 초기화 등 다양한 상황에서 유용하게 활용할 수 있습니다.