canvas 스크립팅 API 또는 WebGL API 와 함께 HTML <canvas> 엘리먼트를 사용해 그래픽이나 애니메이션을 그릴 수 있습니다.

어트리뷰트

이 엘리먼트는 전역 어트리뷰트를 포함합니다.

height
CSS 픽셀 좌표 공간의 높이입니다. 기본값은 150입니다.
moz-opaque
투명도가 중요한 요소인지를 캔버스에 알려줍니다. 투명도가 없음을 알게되면 페인팅 성능이 최적화됩니다. Mozilla 기반 브라우저에서만 지원하므로, 대신 표준화된 canvas.getContext('2d', { alpha: false }) 를 사용하시기 바랍니다.
width
CSS 픽셀 좌표 공간의 폭입니다. 기본값은 300입니다.

사용 노트

대체 컨텐츠

<canvas> 블록 안에서 대체 컨텐츠를 제공할수 있습니다. 컨텐츠는 캔버스를 지원하지 않는 오래된 브라우저와 JavaScript 를 사용하지 않는 브라우저 모두에서 렌더링됩니다.

필수 </canvas> 태그

<img> 엘리먼트와 달리 <canvas> 엘리먼트는 닫는 태그(</canvas>)가 필수입니다.

캔버스 크기 조절

캔버스가 표시되는 크기는 스타일시트를 사용해 변경할 수 있습니다. 스타일이 적용된 크기에 맞게 렌더링되는 동안 이미지의 크기가 조절됩니다. 렌더링이 왜곡된것처럼 보인다면, CSS 를 사용하는 대신 <canvas> 어트리뷰트에 명시적으로 width 와 height 를 지정해보시기 바랍니다.

 

최대 캔버스 크기

<canvas> 엘리먼트의 최대 크기는 아주 크지만, 정확한 크기는 브라우저에 따라 다릅니다. 당ㅁ은 다양한 테스트 및 여러 출처(예, Stack Overflow)로부터 수집한 데이터의 일부입니다.

브라우저 최대 높이 최대 너비 최대 크기
Chrome 32,767 픽셀 32,767 픽셀 268,435,456 픽셀 (i.e., 16,384 x 16,384)
Firefox 32,767 픽셀 32,767 픽셀 472,907,776 픽셀 (i.e., 22,528 x 20,992)
Safari 32,767 픽셀 32,767 픽셀 268,435,456 픽셀 (i.e., 16,384 x 16,384)
IE 8,192 픽셀 8,192 픽셀 ?

노트: 최대 면적 또는 영역을 초과하면 캔버스를 사용할 수 없게됩니다. 그리기 명령이 동작하지 않게됩니다.

예제

이 코드 조각은 HTML 다큐먼트로 캔버스 엘리먼트를 추가합니다. 브라우저가 캔버스를 렌더링할 수 없거나, 캔버스를 읽을 수 없을 경우 대체 텍스트가 제공됩니다. 유용한 대체 텍스트나 하위 DOM 을 제공하면 캔버스에 더 쉽게 접근할 수 있습니다.

<canvas id="canvas" width="300" height="300">
  대체 텍스트는 캔버스가 표시하는 것을 설명합니다.
</canvas>

그 다음, JavaScript 코드내에서 HTMLCanvasElement.getContext() 를 호출해 그리기 컨텍스트를 얻고 캔버스에 그리기를 시작합니다.

<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d', { alpha: false });
</script>

 

불투명 캔버스

캔버스에 투명도를 사용하지 않는다면, 브라우저에게 캔버스가 불투명함을 말해줍니다. 이는 내부적으로 렌더링을 최적화합니다. 그리기 컨텍스트를 얻을 때 alpha 를 false 로 설정하면 됩니다.

<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d', { alpha: false });
</script>

캔버스에 alpha 옵션이 표준화되기전에는, moz-opaque 어트리뷰트를 사용해야 합니다. 하지만, 이는 Mozilla 기반 렌더링 엔진에서만 동작하므로 사용하지 않는 것이 좋습니다. bug 878155 를 확인해 이 어트리뷰트의 삭제될 때를 추적하시기 바랍니다.

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

접근성 문제

대체 컨텐츠

<canvas> 엘리먼트 그 자체는 비트맵이며 그려진 객체에 대한 어떠한 정보도 제공하지 않습니다. 캔버스 컨텐츠는 시맨틱 HTML 같은 접근성 도구에 노출되지 않습니다. 일반적으로 접근성 웹사이트나 앱에서는 캔버스 사용을 피해야 합니다. 다음 가이드는 더 접근이 쉽도록 도와줍니다.

명세

사양 상태 코멘트
HTML Living Standard
The definition of '<canvas>' in that specification.
Living Standard  
HTML5
The definition of '<canvas>' in that specification.
Recommendation 초기 정의

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
canvasChrome Full support 1Edge Full support YesFirefox Full support 1.5
Notes
Full support 1.5
Notes
Notes Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.
Notes Prior to Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.
Notes Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead.
IE Full support 9Opera Full support 9Safari Full support 2
Notes
Full support 2
Notes
Notes Although early versions of Apple's Safari browser don't require the closing tag, the specification indicates that it is required, so you should be sure to include it for broadest compatibility. Versions of Safari prior to version 2 will render the content of the fallback in addition to the canvas itself unless you use CSS tricks to mask it.
WebView Android Full support 37Chrome Android Full support 18Edge Mobile Full support YesFirefox Android Full support 4
Notes
Full support 4
Notes
Notes Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.
Notes Prior to Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.
Notes Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead.
Opera Android No support NoSafari iOS Full support 1Samsung Internet Android Full support Yes
heightChrome Full support 1Edge Full support YesFirefox Full support 1.5
Notes
Full support 1.5
Notes
Notes Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.
Notes Prior to Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.
Notes Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead.
IE Full support 9Opera Full support 9Safari Full support 2
Notes
Full support 2
Notes
Notes Although early versions of Apple's Safari browser don't require the closing tag, the specification indicates that it is required, so you should be sure to include it for broadest compatibility. Versions of Safari prior to version 2 will render the content of the fallback in addition to the canvas itself unless you use CSS tricks to mask it.
WebView Android Full support 37Chrome Android Full support 18Edge Mobile Full support YesFirefox Android Full support 4
Notes
Full support 4
Notes
Notes Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.
Notes Prior to Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.
Notes Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead.
Opera Android No support NoSafari iOS Full support 1Samsung Internet Android Full support Yes
moz-opaque
Non-standard
Chrome No support NoEdge No support NoFirefox Full support 3.5IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android Full support 4Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
widthChrome Full support 1Edge Full support YesFirefox Full support 1.5
Notes
Full support 1.5
Notes
Notes Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.
Notes Prior to Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.
Notes Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead.
IE Full support 9Opera Full support 9Safari Full support 2
Notes
Full support 2
Notes
Notes Although early versions of Apple's Safari browser don't require the closing tag, the specification indicates that it is required, so you should be sure to include it for broadest compatibility. Versions of Safari prior to version 2 will render the content of the fallback in addition to the canvas itself unless you use CSS tricks to mask it.
WebView Android Full support 37Chrome Android Full support 18Edge Mobile Full support YesFirefox Android Full support 4
Notes
Full support 4
Notes
Notes Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.
Notes Prior to Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.
Notes Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead.
Opera Android No support NoSafari iOS Full support 1Samsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.

함께 보기

문서 태그 및 공헌자

이 페이지의 공헌자: cs09g, mdnwebdocs-bot, azunyan3, AlwaysOnce
최종 변경자: cs09g,