HTML Canvas 繪制
使用 JavaScript 在畫布上繪圖
在 HTML 畫布上的所有繪圖都必須使用 JavaScript 完成：
實例
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
第 1 步：找到 Canvas 元素
首先，您必須找到 <canvas> 元素。
這是通過使用 HTML DOM 方法 getElementById() 完成的：
const canvas = document.getElementById("myCanvas");
第 2 步：創建繪圖對象
其次，您需要一個畫布繪圖對象。
getContext() 是一個內置的 HTML 對象，它提供了用于繪圖的屬性和方法：
const ctx = canvas.getContext("2d");
第 3 步：在畫布上繪圖
最后，您可以在畫布上繪圖了。
將繪圖對象的填充樣式設置為紅色：
ctx.fillStyle = "#FF0000";
fillStyle 屬性可以是 CSS 顏色、漸變或圖案。默認的 fillStyle 是黑色。
fillRect(x,y,width,height) 方法在畫布上繪制一個矩形，使用填充樣式進行填充：
ctx.fillRect(0, 0, 150, 75);
