JavaScriptでのCanvasの基本操作

キャンバスは、ブラウザ上でJavaScriptを使って描画を行うための特別な領域です。 この領域は<canvas>タグを使用して作成され、 幅と高さを指定する必要があります：

html<canvas width="200" height="200"></canvas>

JavaScriptでこの領域を操作するには、まずこのタグへの参照を 何らかの変数に取得します：

javascriptlet canvas = document.querySelector('canvas');

次に、この変数に対してgetContextメソッドを 適用する必要があります：

javascriptlet canvas = document.querySelector('canvas');
let ctx    = canvas.getContext('2d');

簡略化することもできます：

javascriptlet ctx = document.querySelector('canvas').getContext('2d');

結果として、変数ctxには、いわゆる 実行コンテキストを含むオブジェクトが 格納されます。すべての描画はこのオブジェクトの メソッドを使用して行われます。 そのメソッドの学習が今後のレッスンのテーマとなります。