[Canvas 태그] 그래픽을 위한 HTML의 도화지

300x250

Canvas 태그 

HTML에서 동적으로 그래픽을 그릴 수 있는 방법이 필요할 때 사용하는 핵심 도구가 바로 <canvas> 태그입니다. 이 태그는 간단해 보이지만, 자바스크립트와 함께 사용하면 2D 게임, 애니메이션, 실시간 데이터 시각화, 심지어 비디오 처리까지 매우 다양한 응용이 가능합니다.

이 글에서는 <canvas> 태그의 기본 개념부터 시작해, 자바스크립트와 함께 사용하는 방식, 그리고 실제 예제까지 다뤄보겠습니다.

 

---

1.  canvas 태그란?

<canvas>는 HTML5에서 도입된 태그로, 비트맵 기반 그래픽을 동적으로 그릴 수 있는 영역을 제공합니다. 자체적으로는 아무런 그래픽을 그리지 않으며, 반드시 JavaScript를 통해 내용을 렌더링해야 합니다.

<canvas id="myCanvas" width="400" height="300"></canvas>

 

위 코드는 폭 400px, 높이 300px짜리 캔버스를 만들어줍니다. 하지만 이 상태에서는 아무것도 보이지 않죠. 여기에 자바스크립트를 이용해 그림을 그려야 의미가 있습니다.

 

---

2.  기본 사용법

a.  getContext()로 캔버스 컨텍스트 가져오기

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

• getContext('2d') : 2D 드로잉 API를 사용할 수 있게 해줍니다.
• (참고) getContext('webgl')을 사용하면 WebGL을 통한 3D 렌더링도 가능합니다.

b.  간단한 도형 그리기 예시

ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 150, 100);  // x, y, width, height

• 위 코드는 파란색 사각형 하나를 그립니다.

 

---

3.  canvas 태그로 할 수 있는 것들

기능	설명
도형 그리기	사각형, 원, 선 등 기본 도형
텍스트 출력	캔버스 내부에 글자 그리기
이미지 처리	이미지 또는 비디오 프레임을 캔버스에 렌더링
애니메이션	requestAnimationFrame()을 이용한 프레임 렌더링
사용자 입력 처리	마우스 좌표 기반의 인터랙션 구현

 

---

4.  예제 - 마우스를 따라 움직이는 원

<canvas id="circleCanvas" width="300" height="300" style="border:1px solid #000;"></canvas>

<script>
  const canvas = document.getElementById("circleCanvas");
  const ctx = canvas.getContext("2d");

  canvas.addEventListener("mousemove", (e) => {
    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    ctx.clearRect(0, 0, canvas.width, canvas.height); // 이전 그림 지우기
    ctx.beginPath();
    ctx.arc(x, y, 20, 0, Math.PI * 2);
    ctx.fillStyle = "red";
    ctx.fill();
  });
</script>

• 이 코드는 마우스를 움직일 때마다 빨간 원이 따라 움직이는 효과를 보여줍니다.

 

---

5.  마무리

• <canvas>는 HTML에서 동적인 그래픽을 그릴 수 있는 도화지 역할을 합니다.
• 자체적으로는 아무것도 하지 않으며, JavaScript와 함께 사용해야 의미가 있습니다.
• 2D, 3D 그래픽, 이미지 편집, 애니메이션, 게임 등 다양한 그래픽 작업에 활용됩니다.

함께 보면 좋은 자료

외부 사이트 :

• MDN Web Docs - Canvas Tag

 

---

반응형