<canvas>: 그래픽 캔버스 요소

HTML <canvas> 요소캔버스 스크립팅 API 또는 WebGL API와 함께 사용해 그래픽과 애니메이션을 그릴 수 있습니다.

콘텐츠 카테고리 플로우 콘텐츠, 구문 콘텐츠, 내장 콘텐츠, 뚜렷한 콘텐츠.
가능한 콘텐츠 투명하지만 대화형 콘텐츠가 아닌 요소. 단, <a>, <button>, 그리고 <input>type 특성이 checkbox, radio, button인 요소는 가능
태그 생략 None, both the starting and ending tag are mandatory.
가능한 부모 요소 구문 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할 모두
DOM 인터페이스 HTMLCanvasElement

특성

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

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

사용 일람

대체 콘텐츠

<canvas> 블록 안에 콘텐츠를 추가해 대체 콘텐츠로서 사용할 수 있습니다. 대체 콘텐츠는 캔버스를 지원하지 않는 구형 브라우저와, JavaScript를 비활성화한 브라우저에서 표시됩니다. 유용한 대체 텍스트, 혹은 하위 DOM을 제공하면 캔버스의 접근성을 향상할 수 있습니다.

닫는 태그 필수

<img> 요소와 달리, <canvas> 요소는 닫는 태그(</canvas>)를 필요로 합니다.

캔버스 크기 조절: CSS vs. HTML

캔버스의 표시 크기는 CSS로도 수정할 수 있습니다. 그러나, CSS를 사용할 경우 렌더링 과정에서 CSS 크기에 맞추기 위해 이미지의 크기를 조절하므로, 최종 그래픽이 변형될 수 있습니다.

따라서 <canvas> 요소의 widthheight 특성을 통해 직접 크기를 바꾸는 것이 좋습니다. HTML에서 직접 할 수도 있고, JavaScript를 사용할 수도 있습니다.

최대 캔버스 크기

<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

이 코드 조각은 HTML 문서에 캔버스를 추가합니다. 대체 텍스트를 추가해서 브라우저가 캔버스를 렌더링 할 수 없거나, 캔버스를 읽을 수 없는 경우에 대비했습니다.

<canvas id="canvas" width="300" height="300">
  캔버스의 내용을 설명하는 대체 텍스트
</canvas>

JavaScript

그 다음, JavaScript 코드 내에서 HTMLCanvasElement.getContext()를 호출해 그리기 맥락을 얻어서 캔버스 위에 그립니다.

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 
ctx.fillStyle = 'green'; 
ctx.fillRect(10, 10, 100, 100);

결과

접근성 문제

대체 콘텐츠

<canvas> 요소 자체는 비트맵에 불과하며 그려진 객체에 대한 어떠한 정보도 제공하지 않습니다. 캔버스 콘텐츠는 시맨틱 HTML 같은 접근성 도구에 노출되지 않습니다. 일반적으로 접근성 웹 사이트나 앱에서는 캔버스 사용을 피해야 합니다. 다음 안내서는 캔버스를 보다 쉽게 접근 가능한 형태로 사용하는 법을 설명합니다.

명세

Specification Status Comment
HTML Living Standard
The definition of '<canvas>' in that specification.
Living Standard
HTML5
The definition of '<canvas>' in that specification.
Recommendation Initial definition

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
canvasChrome Full support 1Edge Full support 12Firefox 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 18Firefox 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 Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
heightChrome Full support 1Edge Full support 12Firefox 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 18Firefox 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 Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
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 NoFirefox Android Full support 4Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
widthChrome Full support 1Edge Full support 12Firefox 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 18Firefox 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 Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0

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.

같이 보기