Context物件的beginPath方法表示開始繪製路徑，moveTo(x, y)方法設定線段的起點，lineTo(x, y)方法設定線段的終點，stroke方法用來為透明的線段著色。 moveto和lineto方法可以多次使用。最後，也可以使用closePath方法，自動繪製一條當前點到起點的直線，形成一個封閉圖形，省卻使用一次lineto方法。
程式碼如下：
<body>
<canvas id="demoCanvas" width="500" height="600">
</canvas>
<script type="text/javascript">
//通过id获得当前的Canvas对象
var canvasDom = document.getElementById("demoCanvas");
//通过Canvas Dom对象获取Context的对象
var context = canvasDom.getContext("2d");
context.beginPath(); // 开始路径绘制
context.moveTo(20, 20); // 设置路径起点，坐标为(20,20)
context.lineTo(200, 200); // 绘制一条到(200,20)的直线
context.lineTo(400, 20);
context.closePath();
context.lineWidth = 2.0; // 设置线宽
context.strokeStyle = "#CC0000"; // 设置线的颜色
context.stroke(); // 进行线的着色，这时整条线才变得可见
</script>
</body>下一節