canvasのgetContext("2d")って何

canvasのgetContext("2d")について調べたのでメモ。

• HTMLとJavaScriptで図形を描画するには<canvas>要素を用いる。

• <canvas>要素はgetContext()メソッドを持つ。

• getContext()メソッドは、グラフィックを描画するためのメソッドやプロパティをもつオブジェクトを返す。

• getContext()メソッドに引数"2d"を渡して実行すると、2Dグラフィックを描画するためのメソッドやプロパティをもつオブジェクトを返す。

• 引数を"webgl"とすると3Dグラフィックを描画するためのメソッドやプロパティをもつオブジェクトを返す。

HTML

<canvas id="canvas"></canvas>

JavaScript

// canvas要素を取得
const canvas = document.getElementById('canvas');
// canvas要素が持つgetContext()メソッドを実行し、
// グラフィック描画のためのメソッドやプロパティを
// 持つオブジェクトを取得する。
// 引数を"2d"とすることで2Dグラフィックの描画に
// 特化したメソッドやプロパティを持つオブジェクトを取得し、
// 定数ctxに格納する。
const ctx = canvas.getContext("2d");

// 定数ctxに格納したオブジェクトがもつプロパティやメソッドは
// ctx.プロパティ名、ctx.メソッド名() で呼び出せる

// 描画する色を指定するプロパティflillStyle
ctx.fillStyle = 'black';

// 四角形を描画するメソッドfillRect()
ctx.fillRect(15, 10, 150, 100);

参考

Canvas API - Web API | MDN
CanvasRenderingContext2D - Web API | MDN
getContext() メソッド(キャンヴァス操作に必要な"文脈オブジェクト"を与える) - 要素リファレンス
Canvas.getContext() - キャンパスに描画するコンテキストを取得
HTML5 canvas.getContext("2d") リファレンス
Canvasの使い方－Canvasリファレンス