Home▸Mathematics▸Bézier Curve Editor — Animated De Casteljau Construction (2D)

Bézier Curve Editor — Animated De Casteljau Construction (2D)

A 2D companion to the 3D Bézier Curves simulator: drag control points on a plain canvas editor, switch between quadratic and cubic curves, scrub a t-parameter slider, and step through the De Casteljau recursive interpolation one level at a time with each new construction line animating into place.

Mathematics2DEasy60 FPS⇄ 3D version
2d-bezier-curves ↗ Open standalone

This is the 2D companion to the 3D Bézier Curves simulator. It renders the same De Casteljau algorithm on a plain 2D canvas instead of through WebGL, and adds a step-by-step construction build-up: instead of drawing every interpolation level at once, pressing Step Construction replays the recursive linear interpolation one level at a time, animating each new line as it grows into place. Drag the control points to reshape either a quadratic or a cubic curve, scrub the t slider to move the point-at-t marker, and watch how each round of interpolation feeds the next until a single point on the curve remains.

⚙ Under the hood

A 2D companion to the 3D Bézier Curves simulator: drag control points on a plain canvas editor, switch between quadratic and cubic curves, scrub a t-parameter slider, and step through the De Casteljau recursive interpolation one level at a time with each new construction line animating into place.

bezier curvede casteljaucontrol pointsquadratic curvecubic curveinterpolationcanvas 2d

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)