前面介紹了HTML的主要架構，也介紹了如何引入ＪＳ．現在呢，直接在畫面上加入一個canvas的元件．

這邊單純引入canvas，那目前只有給他一個名稱playground，其他都使用預設值．

在瀏覽器會顯示

因為目前沒有對canvas元件做任何設定，顯示出來的是預設大小以及畫面，預設的大小事300px * 150px，這畫面有點小，等等會修改畫面大小，並利用ＪＳ來修改背景顏色．

在canvas後面加入width="800" height="600"就能修改大小．
在ＪＳ中window.onload代表的意思是，等到整個畫面渲染完畢後，才執行function中的程式，後面的遊戲邏輯都寫在這裡面．

canvas = document.getElementById('playground');
canvasContext = canvas.getContext('2d');

則是透過canvas的ＩＤ找到元件，然後透過getContext('2d')可以取得渲染環境．

背景的部分是繪製一個從畫面左上角(0.0)為起點，長寬分別等於canvas長寬的矩形．
這是canvas內建的function，相關的function可以在 https://www.w3schools.com/tags/ref_canvas.asp 找到．

今天的內容引入了canvas，並且繪製了背景色，明天繼續練習一下canvas的畫圖，今天就先這樣啦．