Canvas APIはcanvas要素に線や図形やテキストを書き込んでいくための機能群です。ここでは2Dの平面の操作について書いていきます。DOM操作するより高速に画面をより自由に彩れますね。

まず最初に

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

取得したContextに操作を加えて更新していくスタイルですね。以下、ctxはCanvasのContextを指します。

線を引く

ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.stroke();

座標(x1,y1)から座標(x2,y2)に線を引きます。パス（Path）の考え方は昔から使われています。まず形状を設定して、strokeなどの命令で一気に描画するスタイルです。その方が高速なのかな。

色を変える

ctx.strokeStyle = 'blue'; //線の色
ctx.fillStyle = 'rgba(0,0,0,0.5)'; //塗りの色

strokeStyle や fillStyle プロパティを変更することで描線や塗りの色を変更します。色はCSSで指定するような文字列表現でOKです。