<canvas>

개요

HTML <canvas> 요소는 스크립트 언어(보통은  자바스크립트를 사용)를 통해 그림을 그리는 데에 사용될 수 있습니다. 예를 들면, 그래프를 그리거나, 사진을 합성하거나, 애니메이션을 만들 때도 사용될 수 있습니다. <canvas>를 지원하지 않는 웹브라우저 혹은 자바스크립트 기능을 비활성화해 놓은 웹브라우저를 위해 대체할 내용을 마련해 놓으면 좋습니다.

캔버스에 대한 더 자세한 내용은 canvas topic page에서 확인하세요.

• 컨텐트 카테고리 Flow 컨텐트, phrasing 컨텐트, embedded 컨텐트, palpable 컨텐트.
• 허용된 컨텐트 Transparent but with no interactive content descendants except for <a> elements, <button> elements, <input> elements whose type attribute is checkbox, radio, or button.
• 태그 생략 None, both the starting and ending tag are mandatory.
• 허용된 부모 요소들 phrasing_content를 허용하는 모든 요소들
• DOM 인터페이스 HTMLCanvasElement

속성

이 요소는 전역 속성을 포함합니다.

height

CSS 픽셀 좌표 공간의 높이입니다. 기본값은 150입니다.

moz-opaque

Lets the canvas know whether or not translucency will be a factor. If the canvas knows there's no translucency, painting performance can be optimized.

width

CSS 픽셀 좌표 공간의 폭입니다. 기본값은 300입니다.

예제

<canvas id="canvas" width="300" height="300">
  이 웹 브라우저가 &lt;canvas&gt;를 지원하지 않습니다.
</canvas>

만약 당신이 캔버스를 사용하고, 투명할 필요가 없다면, moz-opaque 속성을 canvas 태그에 설정하면 됩니다. 이 정보는 렌더링을 최적화하는데에 내부적으로 사용될수 있습니다. 하지만, 이 속성은 아직 표준화 되지 않았고, 모질라 기반 렌더링 엔진에서만 작동합니다.

<canvas id="mycanvas" moz-opaque></canvas>

사양

웹 브라우저 호환성

특정 브라우저 주의사항

Firefox (Gecko)

[1] Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) 이전에는, canvas의 가로 세로 길이는 부호없는 정수형 대신에 부호있는 정수였습니다.

[2] Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3) 이전에는, <canvas> 요소의 가로 혹은 세로 길이가 0일경우,  기본 치수로 렌더링 됐었습니다.

[3] 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9) 이전에, 자바스크립트가 비활성화 되있다면, <canvas> 요소는 사양에 따라 대체 내용을 보여주는것 대신에 렌더링 하였습니다.  이제 대체 내용이 대신 렌더링 됩니다.

이것도 보세요

• MDN canvas portal
• Canvas tutorial
• Canvas cheat sheet
• Canvas-related demos