HTMLCanvasElement
インタフェースはcanvas要素のレイアウトや表現の操作のための属性やメソッドを提供します。HTMLCanvasElement
はHTMLElement
インタフェースのプロパティやメソッドも利用可能です。
属性
HTMLElement
から継承する属性の他に以下の属性を持ちます。
HTMLCanvasElement.height
- 正の
integer
でheight
というHTMLの<canvas>
要素の属性で指定されたCSSピクセルの値です。もしこの属性が指定されていないか、無効な値であるならば、デフォルト値として150
を用います。 HTMLCanvasElement.mozOpaque
Boolean
でmoz-opaque
という<canvas>
要素で指定されたものを反映したものです。この属性はcanvasが半透明であることが重要か否かを指定します。もし半透明がないならば、描画を最適化できます。HTMLCanvasElement.width
- 正の
integer
でwidth
というHTMLの<canvas>
要素の属性で指定されたCSSピクセルの値です。もしこの属性が指定されていないか、無効な値であるならば、デフォルト値として300
を用います。
メソッド
HTMLElement
から継承するメソッドの他に以下のメソッドを持ちます。
HTMLCanvasElement.captureStream()
- Returns a
CanvasCaptureMediaStream
that is a real-time video capture of the surface of the canvas. HTMLCanvasElement.getContext()
-
Canvasの描画コンテキストを返すか、サポートされていないコンテキストIDの場合nullを返します。
描画コンテキストを用いてCanvasに描画することができます。
getContextの引数に"2d"
を渡すとCanvasRenderingContext2D
オブジェクトを、"experimental-webgl"
(または"webgl"
)を渡すとWebGLRenderingContext
オブジェクトを返します。
"experimental-webgl"
または"webgl"
コンテキストは、ブラウザがWebGLに対応している場合に限り使用できます。 HTMLCanvasElement.toDataURL()
- Returns a data-URL containing a representation of the image in the format specified by the
type
parameter (defaults topng
). The returned image is in a resolution of 96dpi. HTMLCanvasElement.toBlob()
- Creates a
Blob
object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent. HTMLCanvasElement.transferControlToOffscreen()
- Transfers control to an
OffscreenCanvas
object, either on the main thread or on a worker. HTMLCanvasElement.mozGetAsFile()
- Returns a
File
object representing the image contained in the canvas; this file is a memory-based file, with the specifiedname
. Iftype
is not specified, the image type isimage/png
.
Specifications
Specification | Status | Comment |
---|---|---|
Media Capture from DOM Elements HTMLCanvasElement の定義 |
草案 | Adds the method captureStream() . |
HTML Living Standard HTMLCanvasElement の定義 |
現行の標準 | The method getContext() now returns a RenderingContext rather than an opaque object .The methods probablySupportsContext() , setContext() and transferControlToProxy() have been added. |
HTML 5.1 HTMLCanvasElement の定義 |
勧告 | |
HTML5 HTMLCanvasElement の定義 |
勧告 | Initial definition. |
Browser compatibility
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() |
未サポート (bug 67587) | 19 (19) [2] | ? | ? | 未サポート (bug 71270) |
probablySupportsContext() ,setContext() ,transferControlToProxy() |
未サポート | 未サポート | 未サポート | 未サポート | 未サポート |
mozGetAsFile() |
未サポート | 4.0 (2) | 未サポート | 未サポート | 未サポート |
captureStream() |
未サポート | 41 (41) | 未サポート | 未サポート | 未サポート |
transferControlToOffscreen() |
未サポート | 44 (44) [3] | 未サポート | 未サポート | 未サポート |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support (2D context) |
2.1 | (有) | (有) | ? | 10.0 [1] | 3.2 |
webgl context |
? | ? | (有) as experimental-webgl |
? | ? | ? |
toBlob() |
未サポート (bug 67587) | 未サポート (bug 67587) | 18.0 (18) [2] | ? | ? | 未サポート (bug 71270) |
probablySupportsContext() ,setContext() ,transferControlToProxy() |
未サポート | 未サポート | 未サポート | 未サポート | 未サポート | 未サポート |
mozGetAsFile() |
未サポート | 未サポート | 4.0 (2) | 未サポート | 未サポート | 未サポート |
captureStream() |
未サポート | 未サポート | 41.0 (41) | 未サポート | 未サポート | 未サポート |
transferControlToOffscreen() |
未サポート | 未サポート | 44.0 (44) [3] | 未サポート | 未サポート | 未サポート |
[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
.
See also
- HTML element implementing this interface:
<canvas>
.