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> 要素のレイアウトや表示を操作するための属性やメソッドを提供します。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 Standard
# htmlcanvaselement

ブラウザーの互換性

BCD tables only load in the browser

関連情報

  • このインターフェイスを実装している HTML 要素: <canvas>.