HTMLCanvasElementインタフェースはcanvas要素のレイアウトや表現の操作のための属性やメソッドを提供します。HTMLCanvasElementはHTMLElementインタフェースのプロパティやメソッドも利用可能です。
属性
HTMLElementから継承する属性の他に以下の属性を持ちます。
HTMLCanvasElement.height- 正の
integerでheightというHTMLの<canvas>要素の属性で指定されたCSSピクセルの値です。もしこの属性が指定されていないか、無効な値であるならば、デフォルト値として150を用います。 HTMLCanvasElement.mozOpaqueBooleanでmoz-opaqueという<canvas>要素で指定されたものを反映したものです。この属性はcanvasが半透明であることが重要か否かを指定します。もし半透明がないならば、描画を最適化できます。HTMLCanvasElement.width- 正の
integerでwidthというHTMLの<canvas>要素の属性で指定されたCSSピクセルの値です。もしこの属性が指定されていないか、無効な値であるならば、デフォルト値として300を用います。
メソッド
HTMLElementから継承するメソッドの他に以下のメソッドを持ちます。
HTMLCanvasElement.captureStream()- Returns a
CanvasCaptureMediaStreamthat 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
typeparameter (defaults topng). The returned image is in a resolution of 96dpi. HTMLCanvasElement.toBlob()- Creates a
Blobobject 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
OffscreenCanvasobject, either on the main thread or on a worker. HTMLCanvasElement.mozGetAsFile()- Returns a
Fileobject representing the image contained in the canvas; this file is a memory-based file, with the specifiedname. Iftypeis 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>.