基本例子

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 示例