Canvas 是 HTML5 中的一个新特性，它是一个画布，可以用 JavaScript 来绘制图形。以下是一个基本的示例，演示如何在 canvas 上绘制一个矩形：
首先，你需要在 HTML 文件中创建一个 canvas 元素：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</body>
</html>然后，你可以使用 JavaScript 来获取这个 canvas，并绘制一个矩形：
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 150, 100);上面的代码首先获取了 id 为 "myCanvas" 的 canvas，然后获取了这个 canvas 的 2d 渲染上下文。然后设置了填充颜色为红色，最后用 fillRect 方法绘制了一个矩形。这个矩形的左上角位于 (20,20)，宽度为 150，高度为 100。
这只是 canvas 的基本使用方法，你还可以用它来绘制各种各样的图形，包括路径、圆、文本、梯度等。你也可以使用一些更高级的特性，比如渐变、阴影、剪辑区域和图像。