지난 포스트에서 <canvas>태그에 대해 알아봤습니다.

간단히 요약하자면, 자바스크립트 등의 스크립트를 통해 그린 요소를 표시해 주는 태그였는데요. 자바스크립트에선 이런 캔버스의 등장과 함께 Canvas API를 지원하면서 이 캔버스를 다루는 여러 기능들을 제공하고 있습니다.

이번 포스트에서 자바스크립트를 통해 어떻게 <canvas> 태그에 요소를 그릴 수 있는지 알아보도록 하겠습니다.

---

HTMLCanvasElement.getContext()

<canvas> 태그는 지정된 고정 크기의 영역을 가지고, 렌더링 콘텍스트를 사용해서 캔버스에 컨텐츠를 생성하고 관리합니다.

<div class="canvasWrapper">
  <canvas id="myCanvas">
    캔버스를 지원하지 않는 브라우저의 경우, 이 메세지가 출력됩니다.
  </canvas>
</div>

빈 캔버스를 하나 생성했습니다.

이 캔버스를 다루기 위한 js 코드는 아래와 같습니다.

document.addEventListener('DOMContentLoaded', () => {
  let canvas = document.getElementById('myCanvas');
  let ctx = canvas.getContext('2d');

  ctx.fillStyle = "rgb(100, 100, 200)";
  ctx.fillRect(30, 30, 30, 30);
});

ctx로 캔버스에 그릴 콘텍스트를 가져오고 프로퍼티와 함수들을 통해 그려질 형태를 조작하게 됩니다.

getContext()의 '2d'는 캔버스에 그리는 2D 그래픽을 의미합니다. 다른 형태도 있지만 현재는 2D만을 다루도록 하겠습니다.

fillStyle

fillStyle은 캔버스에 그린 도형 등의 색을 지정하는 프로퍼티입니다.

ctx.fillStyle = '색상 지정';

색상은 여러 색상 표기법 중 편한 방식을 사용하면 됩니다.

fillRect

fillRect는 직사각형을 그리는 함수입니다.

ctx.fillRect(x, y, width, height)

x와 y는 캔버스의 위치를 지정합니다. 이때 기준 점은 캔버스의 좌측최상단부터 시작해서 상대적으로 계산됩니다. width와 height는 각각 그려질 사각형의 가로와 세로 길이를 지정하는 인수입니다.

fillText

fillText는 텍스트를 렌더링하는 함수입니다.

ctx.fillText(text, x, y[, maxWidth])

x와 y 위치에 text를 그려줍니다. maxWidth는 선택 사항으로 텍스트의 최대폭을 의미합니다.

---

이 외에도 더 많은 캔버스 함수들을 제공하고 있습니다. 더 자세한 사항은 MDN에서 확인할 수 있습니다.