こんにちは。
今回の記事は、これからCanvasを勉強したいと思っている人向けの入門記事です。
Canvasって何ができるの？
・図形や画像の描画
・アニメーション
・マウスイベント（お絵描き機能）
・音楽の再生
など様々なことができます。
Canvasを使う準備
早速Canvasを試していきたいところですが、最初にHTMLとJavaScriptで下準備を行います。
HTMLの準備
Canvasを使う為には、bodyタグ内の任意の場所にCanvasタグを追加し、
width属性とheight属性を付けます。
widthとheightの数値が、そのままCanvasサイズになります。
<canvas class="canvas" width="600" height="400"></canvas>
JavaScriptの準備
JSではcanvas要素をquerySelectorで取得した後、コンテキストを取得しています。
const canvas = document.querySelector('.canvas'); // Canvasの取得
const context = canvas.getContext('2d'); // Canvasからコンテキスを取得
コンテキストとは
コンテキストというと少しイメージが難しいですが、
簡単に言うと、
図形、文字、画像などを描画するメソッドや
塗りの色や透明度などの描画に関するプロパティを
ひとまとめにしたオブジェクトのことを指します。
例えば図形を描画するには、図形の色を指定する必要がありますし、
どの程度のサイズでどの位置に描画するかも決める必要があります。
そうした描画に関する様々なデータは、このコンテキストオブジェクトに格納されているので、それを使うことで自由に図形などを描画することができます。
正方形を描画する
では今回は正方形を描画してみましょう。
コンテキストとはで少し説明したように、
contextは描画の色を管理するプロパティを持っています。
それがfillStyleです。
fillStyleの使い方は、下記のコードの様に、正方形を描画する前に塗りたい色を指定します。
context.fillStyle = 'green'; // 描画の塗り色を決める
context.fillRect(10, 10, 100, 100); // 位置とサイズを決めて描画
そして、指定した色を使って描画を行うには、fillRectメソッドを使います。
fillRectは以下の引数を取ります。
context.fillRect(開始位置X座標, 開始位置Y座標, 幅, 高さ);
ここで重要になってくるのは、Canvasの座標です。
Canvasは左上を原点(0,0)とする、Canvas内座標を持っています。
今回のCanvasサイズは600×400なので、以下のようになります。
fillRectは、このCanvas内の座標に描画していくことになるので、
今回の場合、原点（左上）からx軸で10px y軸で10px離れた点から、
幅と高さが100pxの図形を描画する！という命令になります。
context.fillRect(10, 10, 100, 100)
最終的に以下のように描画されました！
（分かりやすいように背景色を付けています）
まとめ（本記事のポイント）
ここまでお読み頂きありがとうございます。
本記事で抑えておきたいポイントは2点です！
①コンテキストは描画に関するデータやメソッドを格納しているオブジェクトである！
②Canvasは内部に座標を持っていて、原点は左上である！
この2つをしっかりと抑えておくと、コードを書く際の迷いが減ると思います！
Canvasには他にもアニメーションやインタラクティブ要素など色々なことができるので、とても面白いです。
今後も初級編、中級編とCanvasに関する記事を投稿していきたいと思いますので、何卒よろしくお願いします！