<canvas> 標籤是HTML5的畫布功能，可以在其中繪圖，但標籤本身只是個容器，
畫布內容必須用 javascript 來產生裡面的圖形，簡單的介紹一下 <canvas> 的使用方法 :

在網頁任何想要置放繪圖區域的地方加上 :

<canvas id="canvas1" width="500" height="500" >
你的瀏覽器不支援HTML5 canvas 標籤
</canvas>

這樣會產生一個 500 x 500px 看不見的區塊，
接下來可以新增 <script> 標籤，在其中開始 javascript 的控制，
整張圖的起始座標為 <canvas> 標籤繪圖區域左上角的 (0,0) 點，
我們由畫矩形開始 :

<script>

var c = document.getElementById("canvas1");
var ctx = c.getContext("2d");
ctx.fillStyle = "gray";
ctx.fillRect(0,0,150,75);

</script>

var c = document.getElementById("Canvas1");
這一行是由 javascript 選取 canvas 這個畫布元素，
var ctx = c.getContext("2d");
這行是使用 HTML5 的內建對象"2d"開始，
fillStyle 是填色，可以填入色碼，
fillRect 則是由這四個座標畫出矩形範圍，

最後會得到一個灰色的矩形。