HTML5的画布路径是一系列的点与点之间的绘图指令。例如，一系列的点用线在它们之间，或者与它们之间的电弧。
路径用来绘制多种类型的形状（线，圆，多边形等）的HTML5画布上的，所以要理解这个核心概念是很重要的。
开始和关闭路径
路径开始和结束时使用的2D上下文函数调用beginPath（）和closePath（） ，就像这样：
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.beginPath();
//... path drawing operations
context.closePath();
moveTo()
当使用一个路径图，使用的是虚拟的“笔”或“指针”。这个虚拟指针总是位于在一些点。移动虚拟指针是通过使用2D上下文功能 MOVETO（X，Y） ，就像这样：
context.moveTo(10,10);
lineTo()
context.beginPath(); context.moveTo(10,10); context.lineTo(50,50); context.closePath();
stroke() + fill()
context.beginPath(); context.moveTo(10,10); context.lineTo(60,50); context.lineTo(110,50); context.lineTo(10,10); context.stroke(); context.closePath(); context.beginPath(); context.moveTo(100,10); context.lineTo(150,50); context.lineTo(200,50); context.lineTo(100,10); context.fill(); context.closePath();
Line Width
context.lineWidth = 10;
这里绘制的1,5和10的线宽三行：
Line Cape
- butt
- round
- square
它可以是一个有点难以看到绘制一个线之间的差值的linecap 的价值对接和广场。因此，我创建了使用线对的几个例子对接和广场，拉近彼此，所以你可以看到其中的差别。顶部或左侧线正在使用的对接，和底部或行权使用方。
正如你可以看到，使用该行的linecap价值广场有一个额外的矩形在最后得出，这使该行时间稍长。
行加入
该lineJoin的2D背景的属性定义了点如何绘制两条直线连接。当两个线连接的点被称为“线路连接”。该lineJoin属性可以具有以下值：
- 斜切
- 斜角
- 圆
这里有三个代码示例设置线条连接：
context.lineJoin =“斜切”; context.lineJoin =“伞”; context.lineJoin =“圆”;
值为斜切正在绘制的线连接结果在一个三角形的角落。
值为斜面被绘制线条连接在一个平面（线性）一角的结果。
值为轮正在绘制的线条连接导致了圆角。
这里有三个例子显示（左起）斜角，斜面和圆 作为价值的lineJoin财产。
弧（）
二维上下文功能弧（）画在画布上的弧。
该弧（）函数有6个参数：
- x：圆弧的中心点的x坐标。
- ?：y坐标圆弧的中心点。
- 半径：圆弧的半径。
- 由startAngle：弧度从该圆弧开始角。
- endAngle：在电弧结束于该弧度角。
- 逆时针：套的方向是否绘制的是逆时针还是不（=不顺时针方向）。
下面是一个代码示例：
context.lineWidth = 3; VAR X = 50; VAR Y = 50; VAR半径= 25; VAR由startAngle =（Math.PI / 180）* 45; VAR endAngle =（Math.PI / 180）* 90; VAR逆时针=假; context.beginPath（）; context.arc（X，Y，半径，由startAngle，endAngle，逆时针）; context.stroke（）; context.closePath（）;
此代码示例绘制一个圆弧的中心点，在50，50，25像素，从45度开始，并一直持续到180度的半径。打算从0到360度转换为弧度，你可能已经注意到了。
下面是代码例子看起来在画布上绘制时：
下面是相同的代码示例，但与逆时针设置为真：
画出一个完整的圆，简单的设定由startAngle到0和 endAngle至 2其等于
* Math.PI（Math.PI / 180）* 360。
包含arcTo（）
二维上下文有一个包含arcTo（）函数，但它的能力可以使用模仿了lineTo（）和弧（） ，所以我会跳过它。
到quadraticCurveTo（）
在到quadraticCurveTo（）函数绘制二次贝塞尔曲线从一点到另一点。该曲线是由一个单一的控制点来控制。下面是一个代码示例：
context.lineWidth = 3; VAR fromX = 50; VAR fromY = 50; VAR TOX = 100; VAR玩具= 50; VAR CPX = 75; VAR CPY = 100; context.beginPath（）; context.moveTo（fromX，fromY） ; context.quadraticCurveTo（CPX，CPY，TOX，玩具）; context.stroke（）; context.closePath（）;
使用控制点75，100（CPX，CPY）此代码示例绘制一条曲线，从50，50至100，50。由此产生的曲线是这样的：
在画布上的小圆点是我得出了有控制点。它不是曲线的一部分正常。
bezierCurveTo（）
该bezierCurveTo（）函数绘制三次Bezier曲线从一个点另一个。三次贝塞尔曲线有2个控制点，而二次贝塞尔曲线只有1控制点。下面是一个代码示例：
context.lineWidth = 3; VAR fromX = 50; VAR fromY = 50; VAR TOX = 300; VAR玩具= 50; VAR cp1X = 100; VAR cp1Y = 100; VAR cp2X = 250; VAR cp2Y = 100; context.beginPath（ ）; context.moveTo（fromX，fromY）; context.bezierCurveTo（cp1X，cp1Y，cp2X，cp2Y，TOX，玩具）; context.stroke（）; context.closePath（）;
使用控制点此代码示例绘制一条曲线，从50，50至300，50 100，100（cp1X，cp1Y）和250，100（cp2X，cp2Y）。由此产生的曲线是这样的：
在画布上的两个小点是，我已经吸引到你展示他们在哪里的控制点。它们不绘制为曲线的一部分。
下面是使用不同的开始点，结束点和控制点不同的例子：
context.lineWidth = 3; VAR fromX = 50; VAR fromY = 50; VAR TOX = 300; VAR玩具= 50; VAR cp1X = 100; VAR cp1Y = 10; VAR cp2X = 250; VAR cp2Y = 100; context.beginPath（ ）; context.moveTo（fromX，fromY）; context.bezierCurveTo（cp1X，cp1Y，cp2X，cp2Y，TOX，玩具）; context.stroke（）; context.closePath（）;
这里是相应的曲线：
此外，两个小点是，我已经明确地呈现的控制点。