'HTML5에 추가된 새로운 것이야!', '이게 3D 그래픽까지 표현한다고 하네!' 뭐 이정도였고 여타 태그처럼 하나의 컴포넌트 정도로 생각했다. 그리고 인터랙티브한 게임까지도 만들어 낸다는 사실을 알게 되었고 연차가 있는 웹 개발자라면 그 동안의 웹 개발 경험에 기반한 <canvas >활용에 대한 상상을 한다. 그러나 뻔한 예상은 보기좋게 빗나가고 웹을 떠나서 컴퓨터가 그래픽을 그려내는 메커니즘을 이해하지 않으면 <canvas>는 '웹에서 이런 것이 가능해' 라고 떠드는 정도 밖에 안되는 자신을 발견하게 된다.
참 간단한 정의다. 실제로 캔버스는 유화 그림을 그릴 수 있는 천을 의미한다. 이것을 태그로 만들었다. 즉 <canvas> 태그는 <div> 태그가 콘텐츠를 담는 컨테이너를 만들어 주는 것 처럼 그림을 그릴 수 있는 공간을 만들어 준다. 그림은 그림이다. 미리 준비된 사각형, 원 등을 가져다 끼워넣는 그런것이 아니다. 그냥 연필로 스윽 그린 것 처럼 그러한 그림이다. 캔버스에 그린 그림을 다시 그리려면 기존의 그림을 지워할 것이다. 마찬가지로 <canvas>에 그려진 그림이 있다면 지우고 다시 그리면 된다.
이제 충분히 알았으니 캔버스를 빗대어 설명하지 않겠다. 단순히 그림만 그려 준다면 <canvas>에 대해 그렇게 매력을 느끼지 못할 것이다. 그러나 <canvas>는 그 이상의 무엇인가가 있다.
<canvas>는 움직이는 그림을 연출할 수 있다.<canvas>는 텍스트를 그릴 수 있다.<canvas>는 비디오를 보여줄 수 있다.<canvas>는 오디오를 들려줄 수 있다.<canvas>는 3D를 표현할 수 있다.<canvas>는 게임를 구현할 수 있다.<canvas> 태그는 HTMLCanvasElement 인터페이스를 가지고 있는 엄연한 DOM이다. 따라서 다른 요소처럼 상속된 API를 사용할 수 있다. 그리고 CSS로 위치와 크기를 설정할 수 있다. 물론 position 속성을 적용할 수도 있다. 자유로운 그림을 그릴수 있는 캔버스를 DOM처럼 다룰 수 있으니 화면 연출에 다양하게 활용될 수 있다.
분명 <canvas>는 DOM이지만 캔버스 안에 그려지는 모든 것들은 DOM과 무관하다. 즉 캔버스 안에 그려진 형상들에게 어떠한 사후 처리도 할 수 없다. 다시 말해서 원을 하나 그리고 그려진 원을 클릭할 때 동작을 기대할 수 없다는 것이다.
그렇다면 캔버스에 그려진 그림들에게 정말 이벤트를 사용할 수 없을까? 그렇지는 않다. <canvas>에 이벤트를 등록하고 <canvas>내 이벤트가 발생한 위치 값을 사용하여 원하는 위치에 있는 형태에게 이벤트가 발생한 것 처럼 로직을 구현할 수 있다.
캔버스에 움직이는 형상을 그려낼 수 있다. 원리는 간단하다. setInterval() 또는 requestAnimationFrame() 메소드를 사용하여 움직이는 동작 하나 하나를 새로 그려내면 된다. 예를 들어서 공이 굴러가는 동작을 캔버스에 구현하고자 한다면 공의 위치 값을 계속 새로 바꾸어 그려주면 된다. 새로 그려내는 속도가 워낙 빨라서 놀랄 정도다.