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