ctx.beginPath();
ctx.moveTo(0, 140);
ctx.lineTo(80, 100);
ctx.quadraticCurveTo(, , 160, 200);
ctx.quadraticCurveTo(, , 400, 280);
ctx.stroke();
This path consists of a line and two quadratic Bézier curves connected together. Adjust the control points of the Bézier curves to create a smooth path.
The path will be smooth when the line and the first Bézier curve have the same tangent line at (80, 100), and the first Bézier curve and the second Bézier curve have the same tangent line at (160, 200).
ctx.beginPath();
ctx.moveTo(0, 140);
ctx.lineTo(80, 100);
ctx.bezierCurveTo(, , , , 160, 200);
ctx.bezierCurveTo(, , , , 400, 280);
ctx.stroke();
This path consists of a line and two cubic Bézier curves connected together. Adjust the control points of the Bézier curves to create a smooth path.
The path will be smooth when the line and the first Bézier curve have the same tangent line at (80, 100), and the first Bézier curve and the second Bézier curve have the same tangent line at (160, 200).