HTMLCanvasElement インターフェイス

　HTMLCanvasElement インターフェイスは、グラフィックを描写するための<canvas> エレメントを定義したインターフェイスです。
　<canvas> エレメントは JavaScript を併用して利用します。

　このインターフェイスに<canvas> エレメントのプロパティ、メソッド、イベントを定義しています。

HTMLCanvasElement 継承図

- ad -

プロパティ(Properties)

　HTMLCanvasElement インターフェイスは以下の独自のプロパティをもちます。HTMLElement インターフェイスのプロパティも継承しています。

プロパティ	概要	分類
.height	エレメントの高さを取得、設定。単位なしの数値で指定。値はピクセル。デフォルトは 150
.width	エレメントの幅を取得、設定。単位なしの数値で指定。値はピクセル。デフォルトは 300

　以下は、HTMLElement インターフェイスのプロパティと継承したプロパティです。参考にしてください。

Nodeのプロパティ一覧　

タイプ名（ハンドラー名）	概要	分類

Elementのプロパティ一覧　

タイプ名（ハンドラー名）	概要	分類

HTMLElementのプロパティ一覧　

タイプ名（ハンドラー名）	概要	分類

　HTMLCanvasElement インターフェイスは以下の独自のメソッドがあります。さらに継承したメソッドがあります。

メソッド	概要	分類
.captureStream()	リアルタイムのキャプチャー画像の CanvasCaptureMediaStream を返す
.getContext()	canvas で扱うコンテキスト、 2D 、WebGL、ビットマップのいずれかを設定または取得
.toDataURL()	type パラメーターで指定される画像フォーマット data URI を返す。返り値の画像は 96 dpi の解像度
.toBlob()	ディスクにキャッシュされたまたはメモリの保存された画像を Blob オブジェクトで返す。
.transferControlToOffscreen()	替えのコントロールである OffscreenCanvas を返す

　HTMLCanvasElement インターフェイスが継承したHTMLElement インターフェイスのメソッドです。 Node 、Element インターフェイスのメソッドを含みます。使えないものもあるので参考してください。

Nodeのメソッド一覧　

タイプ名（ハンドラー名）	概要	分類

Elementのメソッド一覧　

タイプ名（ハンドラー名）	概要	分類

HTMLElementのメソッド一覧　

タイプ名（ハンドラー名）	概要	分類

　HTMLCanvasElement にイベントハンドラーを定義する方法には以下があります。

HTMLCanvasElement.addEventListener( 'click', ()=>{...} )

HTMLCanvasElement.onclick = function(){...}

<button onclick = "..." >

　イベントについてはEventを参照してください。イベントの監視についてはEventTargetが担っています。

　以下は、HTMLCanvasElement が継承しているイベント一覧です。使えないものもあるので参考にしてください。

GlobalEventHandlersのイベント一覧　

タイプ名（ハンドラー名）	概要	分類

DocumentAndElementEventHandlersのイベント一覧　

タイプ名（ハンドラー名）	概要	分類

HTMLElementのイベント一覧　

タイプ名（ハンドラー名）	概要	分類

- ad -