この翻訳は不完全です。英語から この記事を翻訳 してください。

HTMLCanvasElementインタフェースはcanvas要素のレイアウトや表現の操作のための属性やメソッドを提供します。HTMLCanvasElementHTMLElementインタフェースのプロパティやメソッドも利用可能です。

属性

HTMLElementから継承する属性の他に以下の属性を持ちます。

HTMLCanvasElement.height
正のintegerheight というHTMLの<canvas>要素の属性で指定されたCSSピクセルの値です。もしこの属性が指定されていないか、無効な値であるならば、デフォルト値として150を用います。
HTMLCanvasElement.mozOpaque
Booleanmoz-opaqueという<canvas>要素で指定されたものを反映したものです。この属性はcanvasが半透明であることが重要か否かを指定します。もし半透明がないならば、描画を最適化できます。
HTMLCanvasElement.width
正のintegerwidth という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 to png). 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 specified name. If type is not specified, the image type is image/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>.

ドキュメントのタグと貢献者

 このページの貢献者: kiridaruma, mh35, fscholz
 最終更新者: kiridaruma,