HTMLCanvasElement

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

HTMLCanvasElement 인터페이스는 <canvas> 요소의 레이아웃이나 프레젠테이션을 조작하는 여러 프로퍼티와 메서드들을 제공합니다. 또한 HTMLCanvasElement 인터페이스는 HTMLElement 인터페이스의 여러 프로퍼티와 메서드들을 상속받습니다.

프로퍼티

부모객체인 HTMLElement부터 프로퍼티를 상속받음.

HTMLCanvasElement.height
<canvas> 요소에서 HTML 속성인 height를 반영하는 양의 정수이며, CSS의 픽셀값으로 해석되어집니다. 속성값이 주어지지 않거나, 음수와 같이 올바르지 않은 값이 주어진 경우에는 기본 값인 150이 사용됩니다.
HTMLCanvasElement.mozOpaque
<canvas> 요소에서 HTML 속성인 moz-opaque를 반영하는 Boolean 객체입니다. 이는 <canvas>에게 반투명이 인자로 사용될지에 대한 여부를 알려줍니다. 만약 반투명 요소가 없다면, <canvas>의 성능이 최적화될 수 있습니다.
HTMLCanvasElement.width
<canvas> 요소에서 HTML 속성인 width를 반영하는 양의 정수이며, CSS의 픽셀값으로 해석되어집니다.  속성값이 주어지지 않거나, 음수와 같이 올바르지 않은 값이 주어진 경우에는 기본 값인 300이 사용됩니다.
HTMLCanvasElement.mozPrintCallback
는 페이지가 프린트 되는 경우 호출되는 함수입니다. 사용자는 해당 객체에 특정 자바스크립트 함수를 등록함으로써, 만약 프린터가 사용되는 경우 <canvas>를 더욱 고해상도로 다시 그리게 할 수 있습니다. 기본적으로 null 값을 갖습니다. 다음의 블로그 글을 참조하세요.
 

메서드

부모객체인 HTMLElement 로부터 메서드를 상속받음.

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

명세

명세 상태 주석
Media Capture from DOM Elements
The definition of 'HTMLCanvasElement' in that specification.
Editor's Draft captureStream() 메서드 추가하기
WHATWG HTML Living Standard
The definition of 'HTMLCanvasElement' in that specification.
Living Standard

getContext() 메서드가 이제 단순히 객체를 반환하지 않고 RenderingContext 를 반환함. 
다음의 메서드가 추가됨: probablySupportsContext(), setContext()transferControlToProxy()

HTML5.1
The definition of 'HTMLCanvasElement' in that specification.
Recommendation  
HTML5
The definition of 'HTMLCanvasElement' in that specification.
Recommendation 초기 정의

브라우저 호환성

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (2D context) 4.0 3.6 (1.9.2) 9.0 9.0 [1] 3.1
toBlob() 50 19 (19) [2] ? ? No support (bug 71270)
probablySupportsContext(),
setContext(),
transferControlToProxy()
No support No support No support No support No support
mozGetAsFile() No support 4.0 (2) No support No support No support
captureStream() No support 41 (41) No support No support No support
transferControlToOffscreen() No support 44 (44) [3] No support No support No support
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (2D context) 2.1 (Yes) (Yes) ? 10.0 [1] 3.2
webgl context ? ? (Yes) as experimental-webgl ? ? ?
toBlob() No support (bug 67587) 50 18.0 (18) [2] ? ? No support (bug 71270)
probablySupportsContext(),
setContext(),
transferControlToProxy()
No support No support No support No support No support No support
mozGetAsFile() No support No support 4.0 (2) No support No support No support
captureStream() No support No support 41.0 (41) No support No support No support
transferControlToOffscreen() No support No support 44.0 (44) [3] No support No support No support

[1] Opera Mini 5.0 and later has partial support.

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

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

참조

  • 이 인터페이스를 구현한 HTML 요소: <canvas>.

문서 태그 및 공헌자

 이 페이지의 공헌자: kesuskim
 최종 변경: kesuskim,