<canvas>

<canvas>태그는 HTML5에서 추가된 태그입니다.

웹 콘텐츠를 그리는 일을 수행합니다. 콘텐츠를 그릴 때 자바스크립트 등의 스크립트를 이용해서 그리게 됩니다.

즉, 실제로 <canvas>태그에 콘텐츠를 그리는 역할은 스크립트가 수행합니다.

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

.myCanvas {
  border: solid 1px #000;
}

<canvas>는 일부 구버전 브라우저에서 표시가 되지 않을 수 있습니다. 이 경우 각 태그 사이에 삽입되어 있는 내용이 출력됩니다.

또한 <canvas>태그는 width와 height 속성을 가질 수 있습니다. 이 두가지 속성은 선택 사항이며, 따로 명시하지 않을 시 width: 300px, height: 150px의 크기를 기본값으로 갖습니다.

---

HTML과 JS의 카테고리 분류로 인해 이번 포스트에선 <canvas>의 html 사용법만 소개했습니다. 다음 포스트에서 JS로 캔버스를 그리는 법에 대해 알아보도록 하겠습니다.