HTML5 캔버스 태그의 역할
HTML의 <canvas> 태그는 자바스크립트와 같은 스크립트 언어를 활용하여 웹 페이지 위에 그래픽, 애니메이션, 차트 등을 직접 그릴 수 있게 해주는 요소입니다. HTML5에서 새롭게 도입된 이 태그는 플러그인 없이도 동적인 시각 콘텐츠를 구현할 수 있다는 점에서 현대 웹 개발의 핵심 기술로 자리 잡았습니다.
<canvas> 태그 자체는 화면에 아무것도 그리지 않는 빈 도화지 역할만 합니다. 실제로 그림을 그리려면 자바스크립트로 렌더링 컨텍스트에 접근해야 하며, 이때 DOM 메서드인 getContext()를 사용합니다.
캔버스의 기본 문법
가장 간단한 형태의 <canvas> 요소는 다음과 같습니다. id, class 같은 핵심 HTML 속성과 함께 고유 속성인 width와 height를 지정할 수 있습니다.
<canvas id="myCanvas" width="100" height="100"></canvas>
width와 height를 명시하지 않으면 캔버스는 기본적으로 너비 300px, 높이 150px로 설정됩니다.
캔버스의 주요 속성
| 속성 | 값 | 설명 |
|---|---|---|
| height | 픽셀(px) | 캔버스의 높이를 지정합니다. |
| width | 픽셀(px) | 캔버스의 너비를 지정합니다. |
예제: 캔버스로 사각형 그리기
다음 코드를 실행하면 캔버스를 활용해 사각형을 그리는 방법을 직접 확인할 수 있습니다. 캔버스 요소가 제공하는 getContext() 메서드는 렌더링 컨텍스트와 드로잉 함수를 반환하며, 이 함수는 컨텍스트 유형을 나타내는 매개변수 하나(여기서는 '2d')를 받습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML Canvas Tag</title>
</head>
<body>
<canvas id = "myCanvas"></canvas>
<script>
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
ctx.fillStyle = '#7cce2b';
ctx.fillRect(0,0,300,100);
</script>
</body>
</html>코드 설명
위 예제의 동작 순서는 다음과 같습니다.
1. getElementById()로 캔버스 요소를 가져옵니다.
2. getContext('2d')를 호출해 2D 드로잉 컨텍스트 객체를 얻습니다.
3. fillStyle 속성으로 채우기 색상을 연두색(#7cce2b)으로 지정합니다.
4. fillRect(x, y, width, height) 메서드로 좌표 (0,0)부터 너비 300px, 높이 100px 크기의 사각형을 그립니다.
이처럼 캔버스는 게임 그래픽, 데이터 시각화, 이미지 편집 도구 등 다양한 분야에서 활용될 수 있는 강력한 HTML5 기능입니다.