其他形式的曲線
bezierCurveTO(cp1x , cp1y , cp2x , cp2y , x , y);
增加一個到當前路徑的點，並由三次貝塞爾曲線連接兩個控制點。
arcTo(cp1x , cp1y , cp2x , cp2y , radius);
使用兩個控制點和指定半徑爲連接到前一個點的直線路徑添加一個弧度。
arc(x , y , radius , startAngle , endAngle , [antiClockwise]);
爲連接到前一個點的直線路徑添加一個弧度，該弧度是以x,y作爲圓心，以radius作爲半徑的一個圓的一部分， startAngle和endAngle該部分的起始角度和終止角度，antiClockwise指定是否爲逆時針。
文件名：drawing5.html。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>繪製5</title>
<style>
#canvas{background-color: #99cc33;}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById('canvas'),
context = canvas.getContext("2d");
context.beginPath();
context.moveTo(100,100);
context.bezierCurveTo(200,20,200,180,300,100);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(100,250);
context.arcTo(150,150,300,400,50);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(300,300);
context.arc(300,300,50,0,(Math.PI*2),true);
context.closePath();
context.stroke();
}
</script>
</body>
</html>效果圖：
參見《HTML5+Javascript動畫基礎》。