---
title: '<canvas>: 그래픽 캔버스 요소'
slug: Web/HTML/Element/canvas
tags:
- Canvas
- Element
- HTML
- HTML scripting
- Reference
- Web
translation_of: Web/HTML/Element/canvas
---
<div>{{HTMLRef}}</div>
<p><strong>HTML <code><canvas></code> 요소</strong>는 <a href="/ko/docs/Web/HTML/Canvas">캔버스 스크립팅 API</a> 또는 <a href="/ko/docs/Web/API/WebGL_API">WebGL API</a>와 함께 사용해 그래픽과 애니메이션을 그릴 수 있습니다.</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
<td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#내장_콘텐츠">내장 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
</tr>
<tr>
<th scope="row">가능한 콘텐츠</th>
<td><a href="/ko/docs/Web/Guide/HTML/Content_categories#투명_콘텐츠_모델">투명</a>하지만 <a href="/ko/docs/Web/Guide/HTML/Content_categories#대화형_콘텐츠">대화형 콘텐츠</a>가 아닌 요소. 단, {{HTMLElement("a")}}, {{HTMLElement("button")}}, 그리고 {{HTMLElement("input")}} 중 {{htmlattrxref("type", "input")}} 특성이 <code>checkbox</code>, <code>radio</code>, <code>button</code>인 요소는 가능</td>
</tr>
<tr>
<th scope="row">태그 생략</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">가능한 부모 요소</th>
<td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
</tr>
<tr>
<th scope="row">가능한 ARIA 역할</th>
<td>모두</td>
</tr>
<tr>
<th scope="row">DOM 인터페이스</th>
<td>{{domxref("HTMLCanvasElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="특성">특성</h2>
<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
<dl>
<dt>{{htmlattrdef("height")}}</dt>
<dd>좌표 공간의 높이입니다. CSS 픽셀 단위로, 기본값은 150입니다.</dd>
<dt>{{htmlattrdef("moz-opaque")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
<dd>투명도가 중요한 요소인지를 캔버스에 알려줍니다. 투명도가 없음을 알게되면 페인팅 성능이 최적화됩니다. Mozilla 기반 브라우저에서만 지원하므로, 표준 {{domxref("HTMLCanvasElement.getContext()", "canvas.getContext('2d', { alpha: false })")}} 를 대신 사용하세요.</dd>
<dt>{{htmlattrdef("width")}}</dt>
<dd>좌표 공간의 너비입니다. CSS 픽셀 단위로, 기본값은 300입니다.</dd>
</dl>
<h2 id="사용_일람">사용 일람</h2>
<h3 id="대체_콘텐츠">대체 콘텐츠</h3>
<p><code><canvas></code> 블록 안에 콘텐츠를 추가해 대체 콘텐츠로서 사용할 수 있습니다. 대체 콘텐츠는 캔버스를 지원하지 않는 구형 브라우저와, JavaScript를 비활성화한 브라우저에서 표시됩니다. 유용한 대체 텍스트, 혹은 하위 DOM을 제공하면 캔버스의 접근성을 향상할 수 있습니다.</p>
<h3 id="닫는_태그_필수">닫는 태그 필수</h3>
<p>{{HTMLElement("img")}} 요소와 달리, <code><canvas></code> 요소는 닫는 태그(<code></canvas></code>)를 필요로 합니다.</p>
<h3 id="캔버스_크기_조절_CSS_vs._HTML">캔버스 크기 조절: CSS vs. HTML</h3>
<p>캔버스의 표시 크기는 CSS로도 수정할 수 있습니다. 그러나, CSS를 사용할 경우 렌더링 과정에서 CSS 크기에 맞추기 위해 이미지의 크기를 조절하므로, 최종 그래픽이 변형될 수 있습니다.</p>
<p>따라서 <code><canvas></code> 요소의 <code>width</code>와 <code>height</code> 특성을 통해 직접 크기를 바꾸는 것이 좋습니다. HTML에서 직접 할 수도 있고, JavaScript를 사용할 수도 있습니다.</p>
<h3 id="최대_캔버스_크기">최대 캔버스 크기</h3>
<p><code><canvas></code> 요소의 최대 크기는 매우 크지만, 정확한 최대 크기는 브라우저마다 다릅니다. 다음 표는 다양한 테스트와 여러 출처(<a href="https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element">Stack Overflow</a> 등)에서 수집한 값입니다.</p>
<table>
<thead>
<tr>
<th scope="col">브라우저</th>
<th scope="col">최대 높이</th>
<th scope="col">최대 너비</th>
<th scope="col">최대 크기</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chrome</td>
<td>32,767 픽셀</td>
<td>32,767 픽셀</td>
<td>268,435,456 픽셀 (i.e., 16,384 x 16,384)</td>
</tr>
<tr>
<td>Firefox</td>
<td>32,767 픽셀</td>
<td>32,767 픽셀</td>
<td>472,907,776 픽셀 (i.e., 22,528 x 20,992)</td>
</tr>
<tr>
<td>Safari</td>
<td>32,767 픽셀</td>
<td>32,767 픽셀</td>
<td>268,435,456 픽셀 (i.e., 16,384 x 16,384)</td>
</tr>
<tr>
<td>IE</td>
<td>8,192 픽셀</td>
<td>8,192 픽셀</td>
<td>?</td>
</tr>
</tbody>
</table>
<div class="blockIndicator note">
<p><strong>참고</strong>: 최대 면적 또는 영역을 초과하면 그리기 명령이 동작하지 않으므로, 캔버스를 사용할 수 없습니다.</p>
</div>
<h2 id="예제">예제</h2>
<h3 id="HTML">HTML</h3>
<p>이 코드 조각은 HTML 문서에 캔버스를 추가합니다. 대체 텍스트를 추가해서 브라우저가 캔버스를 렌더링 할 수 없거나, 캔버스를 읽을 수 없는 경우에 대비했습니다.</p>
<pre class="brush: html"><canvas id="canvas" width="300" height="300">
캔버스의 내용을 설명하는 대체 텍스트
</canvas></pre>
<h3 id="JavaScript">JavaScript</h3>
<p>그 다음, JavaScript 코드 내에서 {{domxref("HTMLCanvasElement.getContext()")}}를 호출해 그리기 맥락을 얻어서 캔버스 위에 그립니다.</p>
<pre class="brush: js">var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);</pre>
<h3 id="결과">결과</h3>
<p>{{EmbedLiveSample("예제")}}</p>
<h2 id="접근성_문제">접근성 문제</h2>
<h3 id="대체_콘텐츠_2">대체 콘텐츠</h3>
<p><code><canvas></code> 요소 자체는 비트맵에 불과하며 그려진 객체에 대한 어떠한 정보도 제공하지 않습니다. 캔버스 콘텐츠는 시맨틱 HTML 같은 접근성 도구에 노출되지 않습니다. 일반적으로 접근성 웹 사이트나 앱에서는 캔버스 사용을 피해야 합니다. 다음 안내서는 캔버스를 보다 쉽게 접근 가능한 형태로 사용하는 법을 설명합니다.</p>
<ul>
<li><a href="https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">MDN Hit regions and accessability</a></li>
<li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Canvas 접근성 유즈 케이스</a></li>
<li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Canvas 엘리먼트 접근성 문제</a></li>
<li><a href="http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">Firefox 13 의 HTML5 Canvas 접근성 – by Steve Faulkner</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">대화형 캔버스 엘리먼트의 모범 사례</a></li>
</ul>
<h2 id="Specifications" name="Specifications">명세</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'semantics-scripting.html#the-canvas-element', '<canvas>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("html.elements.canvas")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li><a href="/ko/docs/Web/HTML/Canvas">Canvas API</a></li>
<li><a href="/ko/docs/Web/HTML/Canvas/Tutorial">캔버스 자습서</a></li>
<li><a href="https://simon.html5.org/dump/html5-canvas-cheat-sheet.html">캔버스 치트 시트</a></li>
<li><a href="/ko/docs/Web/Demos_of_open_web_technologies">캔버스 관련 데모</a></li>
</ul>