Canvas Bézier Curve Example

This demonstration shows how bézier curves can be drawn on a canvas element. Drag the line ends or the control points to change the curve.

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d")
ctx.lineWidth = 6;
ctx.strokeStyle = "#333";
ctx.beginPath();
ctx.moveTo(100, 250);
ctx.bezierCurveTo(150, 100, 350, 100, 400, 250);
ctx.stroke();