備忘録的プログラミングリファレンス

HTMLCanvasElement インターフェイス

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

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

HTMLCanvasElement 継承図

プロパティ(Properties)

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

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

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

Nodeのプロパティ一覧 

タイプ名(ハンドラー名)概要分類

Elementのプロパティ一覧 

タイプ名(ハンドラー名)概要分類

HTMLElementのプロパティ一覧 

タイプ名(ハンドラー名)概要分類

メソッド(Methods)

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

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

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

Nodeのメソッド一覧 

タイプ名(ハンドラー名)概要分類

Elementのメソッド一覧 

タイプ名(ハンドラー名)概要分類

HTMLElementのメソッド一覧 

タイプ名(ハンドラー名)概要分類

イベント(Event)

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

HTMLCanvasElement.addEventListener( 'click', ()=>{...} )
HTMLCanvasElement.onclick = function(){...}
<button onclick = "..." >

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

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

GlobalEventHandlersのイベント一覧 

タイプ名(ハンドラー名)概要分類

DocumentAndElementEventHandlersのイベント一覧 

タイプ名(ハンドラー名)概要分類

HTMLElementのイベント一覧 

タイプ名(ハンドラー名)概要分類