Canvas Playground: Interactive

Drag either one of the two small squares to see the curve change. (If you go outside the grid, dragging stops. But you can click again and continue.) Works best in Chrome!

Your browser does not support HTML5 canvas.

Understanding Bezier curves: The curve is controlled by two points, shown here as small squares. By moving either or both points, you change the curve. In this case, the start point and end point of the line do not change. You can randomly change the position of either control point and see the effect on the line by dragging one of the small squares above.

See a version controlled by buttons instead of dragging.

I figured out the JS for this myself. View the comments in the JS file to see how it was done. Also, you should look at the alternative version (linked above) to understand how the control points work without dragging.

Canvas Playground index