這是Gamedev Canvas tutorial十個步驟的第一步。你可以這份教學的原始碼，當你完成這份教學你的程式碼應該跟Gamedev-Canvas-workshop/lesson1.html差不多。
在開始撰寫遊戲功能之前，我們先建構在遊戲中負責渲染的基礎結構。渲染可透過HTML的<canvas> 元件完成。
遊戲的HTML
當整個遊戲透過<canvas> 元件渲染時，HTML檔案結構就會相當簡單。用你最喜歡的文字編輯器打開新的HTML檔，將它命名為index.html並存在適當的位置上，再將下面的的程式碼貼到index.html中:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Gamedev Canvas Workshop</title>
<style>
* { padding: 0; margin: 0; }
canvas { background: #eee; display: block; margin: 0 auto; }
</style>
</head>
<body>
<canvas id="myCanvas" width="480" height="320"></canvas>
<script>
// JavaScript code goes here
</script>
</body>
</html>
在header中設定了文字編碼、以及<title>和一些CSS樣式。在body中包含<canvas>與<script>，前者將用來渲染遊戲畫面，後者將用來撰寫JavaScript程式控制渲染。<canvas>元件有個id為myCanvas方便當作參考(reference，如許多程式語言中的變數)讓我們設定它的寬度為480 pixels與高度320 pixels，這份教學中全部的JavaScript 程式碼都會寫在<script>開始標記與</script>結束標記中間。
Canvas基礎
為了能夠順利渲染圖形在<canvas>元件中，獲得<canvas>元件的參考。請將下列的程式碼加在<script>開始標記的後面。
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
我們將<canvas>元件的參考存成變數canvas為了未來使用。建立ctx變數儲存"2D渲染環境"，ctx變數實際拿來繪製Canvas的工具。
以下片段的程式範例在canvas上印出紅色正方形。將以下的程式加在上面J的avaScript程式碼之後，再用瀏覽器打開index.html測試。
ctx.beginPath(); ctx.rect(20, 40, 50, 50); ctx.fillStyle = "#FF0000"; ctx.fill(); ctx.closePath();
所有的指令都介於beginPath()與closePath()。我們用rect()定義了一個矩形，rect()中前兩個數值代表左上角的座標。在上面的情況中，矩形距離左邊20 pixels，距離畫面上方40 pixels，50 pixels寬，50 pixels高，形成完美的正方形。fillStyle屬性所儲存的顏色會被fill()方法用來塗滿正方形，在此為塗上紅色。
不僅矩形— 以下的程式碼印出綠色的圓形。試著將程式碼加在JavaScript底部，存檔在重新整理瀏覽器中的index.html:
ctx.beginPath(); ctx.arc(240, 160, 20, 0, Math.PI*2, false); ctx.fillStyle = "green"; ctx.fill(); ctx.closePath();
如同你看到的我們再次使用了beginPath()與closePath()。在它們中間最重要的程式碼是arc()。arc()用到六個參數(依序介紹)：
圓弧中心的x、y座標- 圓弧的半徑
- 圓弧開始和結束的角度(從開始到結束的角度, 以弧度表示)
- 繪製的方向(
false代表順時針方向, 預設或true為逆時針方向) 最後一個參數並非必要
fillStyle看起來與之前不同，原因就像CSS一樣可以用16進位、顏色關鍵字、rgba()函式等其他可用的顏色指定方法。
不但有fill()填滿圖形，還有 stroke() 專門為外輪廓線上色。也試著加入下面的JavaScript程式碼吧:
ctx.beginPath(); ctx.rect(160, 10, 100, 40); ctx.strokeStyle = "rgba(0, 0, 255, 0.5)"; ctx.stroke(); ctx.closePath();
上面的程式碼印出藍色邊框的空心矩形，由於在rgba()函式的alpha通道，藍色邊框呈現半透明。
比較你的程式碼
這裡第一課的有全部原始碼，在JSFiddle上實際運行:
Exercise: 練習改變物體的大小和顏色