---
title: HTMLCanvasElement
slug: Web/API/HTMLCanvasElement
translation_of: Web/API/HTMLCanvasElement
---
<div>
<div>{{APIRef("Canvas API")}}</div>
</div>

<p><strong><code>HTMLCanvasElement</code></strong> 인터페이스는 &lt;canvas&gt; 요소의 레이아웃이나 프레젠테이션을 조작하는 여러 프로퍼티와 메서드들을 제공합니다. 또한 <code>HTMLCanvasElement</code> 인터페이스는 {{domxref("HTMLElement")}} 인터페이스의 여러 프로퍼티와 메서드들을 상속받습니다.</p>

<h2 id="프로퍼티">프로퍼티</h2>

<p><em>부모객체인 <em>{{domxref("HTMLElement")}} 로</em>부터 프로퍼티를 상속받음. </em></p>

<dl>
 <dt>{{domxref("HTMLCanvasElement.height")}}</dt>
 <dd>는 {{HTMLElement("canvas")}} 요소에서 HTML 속성인 {{htmlattrxref("height", "canvas")}}를 반영하는 양의 정수이며, CSS의 픽셀값으로 해석되어집니다. 속성값이 주어지지 않거나, 음수와 같이 올바르지 않은 값이 주어진 경우에는 기본 값인 150이 사용됩니다.</dd>
 <dt>{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}</dt>
 <dd>는 {{HTMLElement("canvas")}} 요소에서 HTML 속성인 {{htmlattrxref("moz-opaque", "canvas")}}를 반영하는 {{jsxref("Boolean")}} 객체입니다. 이는 &lt;canvas&gt;에게 반투명이 인자로 사용될지에 대한 여부를 알려줍니다. 만약 반투명 요소가 없다면, &lt;canvas&gt;의 성능이 최적화될 수 있습니다.</dd>
 <dt>{{domxref("HTMLCanvasElement.width")}}</dt>
 <dd>는 {{HTMLElement("canvas")}} 요소에서 HTML 속성인 {{htmlattrxref("width", "canvas")}}를 반영하는 양의 정수이며, CSS의 픽셀값으로 해석되어집니다.  속성값이 주어지지 않거나, 음수와 같이 올바르지 않은 값이 주어진 경우에는 기본 값인 300이 사용됩니다.</dd>
 <dt>{{domxref("HTMLCanvasElement.mozPrintCallback")}}{{non-standard_inline}}</dt>
 <dd>는 페이지가 프린트 되는 경우 호출되는 함수입니다. 사용자는 해당 객체에 특정 자바스크립트 함수를 등록함으로써, 만약 프린터가 사용되는 경우 &lt;canvas&gt;를 더욱 고해상도로 다시 그리게 할 수 있습니다. 기본적으로 null 값을 갖습니다. <a href="https://blog.mozilla.org/labs/2012/09/a-new-way-to-control-printing-output/">다음의 블로그 글을 참조하세요.</a></dd>
 <dt> </dt>
</dl>

<h2 id="메서드">메서드</h2>

<p><em>부모객체인 {{domxref("HTMLElement")}} 로부터 메서드를 상속받음.</em></p>

<dl>
 <dt>{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}</dt>
 <dd>&lt;canvas&gt; 상의 화면을 실시간 비디오로 캡처할 수 있는 {{domxref("CanvasCaptureMediaStream")}} 을 반환합니다.</dd>
 <dt>{{domxref("HTMLCanvasElement.getContext()")}}</dt>
 <dd>&lt;canvas&gt; 상의 드로잉 컨텍스트를 반환합니다. 만약 컨텍스트 ID가 지원되지 않는 경우 null값을 반환합니다. 드로잉 컨텍스트는 &lt;canvas&gt; 상에 그림을 그릴 수 있게 해줍니다.  getContext를 <code>"2d"</code> 를 매개 변수로 호출한다면 {{domxref("CanvasRenderingContext2D")}} 객체를 반환할 것이며, <code>"experimental-webgl"</code> (또는 <code>"webgl"</code>) 를 매개 변수로 호출한다면 {{domxref("WebGLRenderingContext")}} 객체를 반환할 것입니다. 후자의 컨텍스트의 경우 <a href="/en-US/docs/Web/WebGL">WebGL</a> 이 구현된 브라우저에서만 사용 가능합니다.</dd>
 <dt>{{domxref("HTMLCanvasElement.toDataURL()")}}</dt>
 <dd><code>type</code> 파라미터에서 지정하고 있는 포맷(기본: png) 의 이미지를 나타내는 data-URL을 반환합니다. 반환된 이미지는 96dpi의 해상도를 갖습니다.</dd>
 <dt>{{domxref("HTMLCanvasElement.toBlob()")}}</dt>
 <dd>&lt;canvas&gt;가 포함하고 있는 이미지를 나타내는 {{domxref("Blob")}} 객체를 생성합니다. 이 파일은 사용자의 브라우저에 따라 디스크나 메모리에 캐싱되거나 저장될 수 있습니다.</dd>
 <dt>{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}</dt>
 <dd>메인 쓰레드나 워커 쓰레드에서 {{domxref("OffscreenCanvas")}} 객체에게 제어 권한을 넘깁니다.</dd>
 <dt>{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
 <dd>&lt;canvas&gt;가 포함하고 있는 이미지를 나타내는 {{domxref("File")}} 객체를 반환합니다. 이 파일은 메모리 기반의 파일이며, <code>name</code> 의 이름을 갖습니다. 만약 <code>type</code> 이 지정되지 않는다면, 이미지는 기본적으로 <code>image/png</code>의 타입을 갖게 될 것입니다.</dd>
</dl>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">명세</th>
   <th scope="col">상태</th>
   <th scope="col">주석</th>
  </tr>
  <tr>
   <td>{{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}</td>
   <td>{{Spec2('Media Capture DOM Elements')}}</td>
   <td><code>captureStream()</code> 메서드 추가하기</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>
    <p><code>getContext()</code> 메서드가 이제 단순히 객체를 반환하지 않고 {{domxref("RenderingContext")}} 를 반환함. <br>
     <code>다음의 메서드가 추가됨: probablySupportsContext()</code>, <code>setContext()</code> 와 <code>transferControlToProxy()</code></p>
   </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>초기 정의</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support (<code>2D</code> context)</td>
   <td>4.0</td>
   <td>{{CompatGeckoDesktop('1.9.2')}}</td>
   <td>9.0</td>
   <td>9.0 [1]</td>
   <td>3.1</td>
  </tr>
  <tr>
   <td><code>toBlob()</code></td>
   <td>50</td>
   <td>{{CompatGeckoDesktop('19')}} [2]</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td>
  </tr>
  <tr>
   <td><code>probablySupportsContext()</code>,<br>
    <code>setContext()</code>,<br>
    <code>transferControlToProxy()</code> {{experimental_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>mozGetAsFile()</code> {{non-standard_inline}} {{deprecated_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop('2')}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>captureStream()</code> {{experimental_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop('41')}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>transferControlToOffscreen()</code> {{experimental_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop(44)}} [3]</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support (<code>2D</code> context)</td>
   <td>2.1</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>10.0 [1]</td>
   <td>3.2</td>
  </tr>
  <tr>
   <td><code>webgl</code> context</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}} as <code>experimental-webgl</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>toBlob()</code></td>
   <td>{{CompatNo}} (bug <a href="http://crbug.com/67587">67587</a>)</td>
   <td>50</td>
   <td>{{CompatGeckoMobile('18')}} [2]</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td>
  </tr>
  <tr>
   <td><code>probablySupportsContext()</code>,<br>
    <code>setContext()</code>,<br>
    <code>transferControlToProxy() </code>{{experimental_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>mozGetAsFile()</code> {{non-standard_inline}} {{deprecated_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoMobile('2')}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>captureStream() </code>{{experimental_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoMobile('41')}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>transferControlToOffscreen()</code> {{experimental_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoMobile(44)}} [3]</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Opera Mini 5.0 and later has partial support.</p>

<p>[2] Support for the third parameter, has been added in Gecko 25 only: when used with the <code>"image/jpeg"</code> type, this argument specifies the image quality.</p>

<p>[3] This feature is behind a feature preference setting. In about:config, set <code>gfx.offscreencanvas.enabled</code> to <code>true</code>.</p>

<h2 id="참조">참조</h2>

<ul>
 <li>이 인터페이스를 구현한 HTML 요소: {{HTMLElement("canvas")}}.</li>
</ul>