基本例子

canvas 元素是在 HTML5 中引入的，用於繪製圖形。

<canvas id="myCanvas">
   Cannot display graphic. Canvas is not supported by your browser (IE<9)
</canvas>

以上將建立一個 300×150 畫素的透明 HTML<canvas> 元素。

你可以使用 canvas 元素繪製令人驚奇的東西，如形狀，圖形，操作影象，使用 JavaScript 建立引人入勝的遊戲等。
canvas 的 2D 可繪製層表面 Object 被稱為 CanvasRenderingContext2D; 或使用 .getContext("2d") 方法從 HTMLCanvasElement：

var ctx = document.getElementById("myCanvas").getContext("2d");
// now we can refer to the canvas's 2D layer context using `ctx`

ctx.fillStyle = "#f00";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); // x, y, width, height

ctx.fillStyle = "#000";
ctx.fillText("My red canvas with some black text", 24, 32); // text, x, y

jsFiddle 示例