在打磚塊(block) - 布景提到，當圖片載入後，可以透過cansvas提供的function drawImage()將圖檔繪製在畫面中，然而此遊戲並非適合。

原因在於我們會需要清除原本的圖片，然後再次繪製；這時問題來了，花了好長一段時間在找尋清除的方式，然而canvas的設計是要能方便的「繪圖」，並非動態調整圖檔，所以能夠輕易地將圖片指定在想要的位置和大小，但後續就調整不了；
除非是用fillRect()、clearRect()，或是其提供的畫圓形函式；但這次的遊戲想要讓畫面不要那麼單調的只有方形或圓形，想要使用自己的圖檔，因此回歸到最原始在HTML加上<img>載入圖檔，然後在css或是javascript做動態位置的調整。

HTML

<img id="ball" src="./imgs/ball.png" alt="red ball">

JavaScript

let img_ball = document.getElementById("ball");
img_ball.style.top = "xxxpx";
img_ball.style.left = "xxxpx";

在布景文章也講述到，想讓遊戲畫面置中，可以利用CSS flex，在pararent div指定其特性要水平置中後，包在裡面的child div，就會自動置中了，然而在判斷邊界時，沒辦法只看遊戲畫面的 0~width 或 0~height, 有遇到一直加上水平位移的長度後，會直接超出遊戲畫面。

必須整個背景的寬高加減中間遊戲畫面的寬高運算，來達到想要的邊界設定，推測這部分和對於flex的了解度還不夠導致，想像應該能指定child都會是在parent內部，這部分還需要再花點時間研究和更新文章。