자바스크립트를 사용하여 canvas(캔버스) 영역 전체에 원하는 배경색(백그라운드색)을 적용하려고 합니다. 어떻게하면 될지 방법을 알아봅니다.



# 캔버스(Canvas)에 배경색 칠하기
canvas에 배경색(전경색)을 어떻게 적용하면 될까요? 가장 많이 쓰이는 방법으로 캔버스와 동일한 크기의 원하는 색상의 사각형을 그리는 방법이 사용됩니다. 즉 캔버스 위에 색을 칠하는 것과 동일하게 구현할 수 있죠.

구현 과정은 아래와 같습니다.

  • 1. 새로운 캔버스를 만들고 컨텍스트를 생성한다.
  • 2. 컨텍스트 내부에 원하는 색의 fillStyle 값을 설정한다.
  • 3. 캔버스와 동일한 크기로 fillRect()를 사용하여 그린다.

매우 간단하죠 그럼 아래에서 간단한 예제를 만들어 적용해봅니다.


! 캔버스(canvas) 배경색 예제보기
아래는 캔버스를 하나를 생성하고 위에 캔버스 전체 크기의 녹색 사각형을 그려 배경색으로 사용한 예제입니다.

@ canvas.html
<canvas id="myCanvas" width="200" height="200"></canvas>

@ canvas.js
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 채울 스타일을 적용
ctx.fillStyle = '#0f0'; 

// 캔버스 크기의 사각형으로 채우기
ctx.fillRect(0, 0, canvas.width, canvas.height);

코드는 매우 간단합니다.여기서 canvas 영역의 width, height 값을 가져오기 위해서 canvas.width, canvas.height를 사용하였습니다.

이제 실제로 구현하면 아래와 같이 나타나게 됩니다.

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
!(() => {
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, canvas.width, canvas.height);
})();
</script>


예상대로 녹색의 캔버스가 간단하게 만들어졌습니다 ~ 이와 같이 캔버스 위에 새로운 색을 칠하는 것처럼 동일한 크기의 색을 가진 사각형을 그리면 전체 캔버스에 배경색을 칠한 것처럼 구현할 수 있습니다.

여기까지 캔버스 영역에 배경색을 만드는 법을 알아보았습니다.