1var canvas = document.getElementById('canvas');
2var ctx = canvas.getContext('2d');
3
4ctx.beginPath();
5ctx.moveTo(50,20);
6ctx.bezierCurveTo(230, 30, 150, 60, 50, 100);
7ctx.stroke();
8
9ctx.fillStyle = 'blue';
10// start point
11ctx.fillRect(50, 20, 10, 10);
12// end point
13ctx.fillRect(50, 100, 10, 10);
14
15ctx.fillStyle = 'red';
16// control point one
17ctx.fillRect(230, 30, 10, 10);
18// control point two
19ctx.fillRect(150, 60, 10, 10);