延續前一天的寬高設定
要把畫布拉大到整個視窗時
因為在 HTML 尺寸只能是 px
所以寫 100% 不會有作用
在 CSS 拉滿畫布則會造成內容變形
所以就要用 JS 做調整

JS 一開始要先找到在 HTML 的元素

var canvas = document.getElementById('canvas');

雖然 id 和 class 都抓的到

但 class 比較少人用

所以之後都用 id

再來要取得 渲染環境
也就是要畫 平面 2d 圖像 或是 3D 圖像

var ctx = canvas.getContext('2d');
// 可以做出 2D 圖像

var ctx = canvas.getContext('webgl');
// 可以做出 2D 和 3D 圖像

這次的日記都以學 2d 為主

要把畫布拉大到全螢幕
就要取得視窗的大小套用在畫布上

canvas.width = window.innerWidth; // 畫布寬 = 視窗內的寬
canvas.height = window.innerHeight; // 畫布高 = 視窗內的高

視窗有預設的 margin 要做移除

body{
  margin: 0;
}

現在還看不到是正常的
因為只有把畫布拉大到視窗大小

要看尺寸有沒有等於視窗大小
可以在 CSS 設定 background-color 上色
或是做一個和畫布大小一樣方型填色

畫方型就用 fillRect(x, y, width, height)
x, y 是在畫布 X 軸 和 Y 軸的位置為方型的左上角
width, height 是方型的寬高

ctx.fillStyle = '#333';
ctx.fillRect(0, 0, canvas.width, canvas.height);

這裡要注意填色 fillStyle 必須在 fillRect 前面
這 2 個有順序 相反了就不會填入設定的顏色
而會是預設的黑色了