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> 要素のレイアウトや表示を操作するための属性やメソッドを提供します。HTMLCanvasElementHTMLElement インターフェイスのプロパティやメソッドも継承しています。

EventTarget Node Element HTMLElement HTMLCanvasElement

インスタンスプロパティ

HTMLElement から継承しているプロパティがあります。

HTMLCanvasElement.height

この <canvas> 要素の height 属性で、このキャンバスの 1 列分の論理ピクセル数(または RGBA 値の数)を反映した正の整数です。この属性が指定されていないか、無効な値であった場合は、150 の既定値が用いられます。もし <canvas> に CSS の高さが[独立して]割り当てられていない場合、この値は CSS ピクセル数の単位で高さとしても使用されます。

HTMLCanvasElement.width

この <canvas> 要素の width 属性で、このキャンバスの 1 行分の論理ピクセル数(または RGBA 値の数)を反映した正の整数です。この属性が指定されていないか、無効な値であった場合は、300 の既定値が用いられます。もし <canvas> に CSS の高さが[独立して]割り当てられていない場合、この値は CSS ピクセル数の単位で幅としても使用されます。

HTMLCanvasElement.mozOpaque 非標準 非推奨;

この <canvas> 要素の moz-opaque 属性を反映した論理値です。半透明の部分の有無をキャンバスに伝えることができます。キャンバスに半透明がないことがわかれば、描画のパフォーマンスを最適化することができます。これは Mozilla ベースのブラウザーでのみ対応しています。代わりに標準化された canvas.getContext('2d', { alpha: false }) を使用してください。

HTMLCanvasElement.mozPrintCallback 非標準

初期状態では null である関数です。ウェブコンテンツでここに JavaScript 関数を設定すると、ページの印刷中にキャンバスが再描画される際に呼び出されます。呼び出される際、コールバック関数には "printState" オブジェクトが渡されます。これは MozCanvasPrintState インターフェイスです。 コールバックは printState オブジェクトから描画するコンテキストを取得することができ、完了したら done() を呼び出す必要があります。mozPrintCallback の目的は、使用するプリンターの解像度でキャンバスの高解像度レンダリングを行うことです。このブログ記事を参照してください

メソッド

HTMLElement から継承しているメソッドがあります。

HTMLCanvasElement.captureStream()

CanvasCaptureMediaStreamTrack を返します。これはキャンバスの表面に対するリアルタイム動画キャプチャです。

HTMLCanvasElement.getContext()

このキャンバスのの描画コンテキストを返すか、対応していないコンテキスト ID の場合は null を返します。描画コンテキストを用いてキャンバスに描画することができます。getContext の引数に "2d" を渡して呼び出すと CanvasRenderingContext2D オブジェクトを返します。"webgl"(または "experimental-webgl")で呼び出すと、 WebGLRenderingContext オブジェクトを返します。このコンテキストは WebGL を実装しているブラウザーでのみ使用できます。

HTMLCanvasElement.toDataURL()

type 引数で指定した形式(既定では png)で画像を表現した data-URL を返します。返す画像の解像度は 96dpi です。

HTMLCanvasElement.toBlob()

キャンパスに格納する画像を表す Blob オブジェクトを作成します。このファイルは、ユーザーエージェントの判断で、ディスクにキャッシュされたり、メモリーに格納されたりすることがあります。

HTMLCanvasElement.transferControlToOffscreen()

OffscreenCanvas オブジェクトへの制御権を、メインスレッドまたはワーカーへ移譲します。

イベント

これらのイベントは、addEventListener() を使用して待ち受けしてください。

contextlost Experimental

ユーザーエージェントが CanvasRenderingContext2D または OffscreenCanvasRenderingContext2D コンテキストに関連付けられたバッキングストレージが失われたことを検出した場合に発行されます。

contextrestored Experimental

ユーザーエージェントが CanvasRenderingContext2D または OffscreenCanvasRenderingContext2D コンテキストの復元に成功した場合に発行されます。

webglcontextcreationerror

ユーザーエージェントが WebGLRenderingContext または WebGL2RenderingContext コンテキストを作成することができない場合に発行されます。

webglcontextlost

ユーザーエージェントが WebGLRenderingContext または WebGL2RenderingContext オブジェクトに関連付けられた描画バッファーが失われたことを検出した場合に発行されます。

webglcontextrestored

ユーザーエージェントが WebGLRenderingContext または WebGL2RenderingContext オブジェクトの描画バッファーを復元する場合に発行されます。

仕様書

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>.