HTMLCanvasElement

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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 비표준

는 페이지가 프린트 되는 경우 호출되는 함수입니다. 사용자는 해당 객체에 특정 JavaScript 함수를 등록함으로써, 만약 프린터가 사용되는 경우 <canvas>를 더욱 고해상도로 다시 그리게 할 수 있습니다. 기본적으로 null 값을 갖습니다. 다음의 블로그 글을 참조하세요.

메서드

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

HTMLCanvasElement.captureStream() Experimental

<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() Experimental

메인 쓰레드나 워커 쓰레드에서 OffscreenCanvas 객체에게 제어 권한을 넘깁니다.

HTMLCanvasElement.mozGetAsFile() 비표준 지원이 중단되었습니다

<canvas>가 포함하고 있는 이미지를 나타내는 File 객체를 반환합니다. 이 파일은 메모리 기반의 파일이며, name 의 이름을 갖습니다. 만약 type 이 지정되지 않는다면, 이미지는 기본적으로 image/png의 타입을 갖게 될 것입니다.

명세

Specification
HTML
# htmlcanvaselement

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
HTMLCanvasElement
captureStream
contextlost event
contextrestored event
getContext
2d context
options.alpha parameter
options.colorSpace parameter
options.desynchronized parameter
options.willReadFrequently parameter
bitmaprenderer context
options.alpha parameter
WebGL2 context
options.alpha parameter
options.desynchronized parameter
options.failIfMajorPerformanceCaveat parameter
options.powerPreference parameter
WebGL context
options.alpha parameter
options.desynchronized parameter
options.failIfMajorPerformanceCaveat parameter
options.powerPreference parameter
webgpu context
Experimental
height
mozOpaque
DeprecatedNon-standard
mozPrintCallback
Non-standard
toBlob
quality parameter
type parameter supports "image/jpeg"
type parameter supports "image/png"
type parameter supports "image/webp"
toDataURL
type parameter supports "image/jpeg"
type parameter supports "image/png"
type parameter supports "image/webp"
transferControlToOffscreen
webglcontextcreationerror event
webglcontextlost event
webglcontextrestored event
width

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Has more compatibility info.

참조

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