자바스크립트로 HTML5 캔버스(Canvas)에 백그라운드 배경 추가하는 방법

자바스크립트로 HTML5 캔버스(Canvas)에 백그라운드 배경 추가하는 방법

자바스크립트로 캔버스에 백그라운드 색상을 적용하려면 어떻게 할까요? 구현하는 과정은 아래와 같습니다.

1. 캔버스 태그를 생성합니다.
2. 캔버스 컨텍스트(ctx) 객체를 정의합니다.
3. 캔버스 컨텍스트에 색상과 색상을 채울 도형을 만듭니다.

예시

아래 예시는 캔버스를 생성한 후 원하는 백그라운드 색상으로 캔버스에 적용하는 예시입니다.

// html
<canvas id="canvas" width="200" height="200"></canvas>

여기서 만들 도형은 캔버스에 꽉찬 정사각형으로 fillRect의 가로, 세로 값을 캔버스의 넓이와 높이로 설정한 것을 알 수 있습니다.

// javascript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = '#009ac8'; 
ctx.fillRect(0, 0, canvas.width, canvas.height);

결과

캔버스가 우리가 지정한 백그라운드 색상으로 채워진 것을 확인할 수 있습니다. 

캔버스에 정사각형 백그라운드 색상이 채워진 모습

이처럼 캔버스에 백그라운드 색상을 적용하기 위해서는 캔버스에 채울 백그라운드 컬러를 설정한 후, 지정한 색상을 채울 도형을 추가하면 됩니다. 예시는 정사각형으로 백그라운드를 채웠지만, 정사각형 이외에 다양한 도형에 색상을 채우는 것에 대한 방법은 동일합니다.