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.

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 Standard
# htmlcanvaselement

브라우저 호환성

BCD tables only load in the browser

참조

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