SOURCE

var g = canvas.getContext("2d");
//普通的直线 
g.beginPath();
g.strokeStyle = "#CCC";
g.moveTo(0, 0);
g.lineTo(200, 0);
g.lineTo(0, 200);
g.lineTo(200, 200);
g.stroke();
//贝兹曲线   
g.beginPath();
g.strokeStyle = "#F00";
g.moveTo(0, 0);
g.bezierCurveTo(200, 0, 0, 200, 200, 200);
g.stroke();

drawBezier(g, 300, 200, 0, 400);
drawBezier(g, 300, 200, 100, 400);
drawBezier(g, 300, 200, 200, 400);
drawBezier(g, 300, 200, 300, 400);
drawBezier(g, 300, 200, 400, 400);
drawBezier(g, 300, 200, 500, 400);
drawBezier(g, 300, 200, 600, 400);
drawBezier(g, 300, 200, 700, 400);
drawBezier(g, 300, 200, 800, 400);
drawBezier(g, 300, 200, 900, 400);

drawBezier(g, 500, 200, 0, 400);
drawBezier(g, 500, 200, 100, 400);
drawBezier(g, 500, 200, 200, 400);
drawBezier(g, 500, 200, 300, 400);
drawBezier(g, 500, 200, 400, 400);
drawBezier(g, 500, 200, 500, 400);
drawBezier(g, 500, 200, 600, 400);
drawBezier(g, 500, 200, 700, 400);
drawBezier(g, 500, 200, 800, 400);
drawBezier(g, 500, 200, 900, 400);

function drawBezier(g, startX, startY, endX, endY) {
  g.beginPath();
  g.strokeStyle = "#2795ee";
  g.moveTo(startX, startY);
  g.bezierCurveTo(startX, endY, endX, (startY + endY) / 2, endX, endY);
  g.stroke();
}

<canvas id="canvas" width="1200" height="1200">
</canvas>