Path Geometry

Bezier Curves

A path begins at a point, gains a quadratic curve to a midpoint, then a cubic Bezier curve completes a smooth ribbon before stroke paints it.

Program

Canvas path methods accept curve commands. A quadratic curve needs one control point; a cubic Bezier needs two. Neither is visible until stroke or fill paints the path.

bezier_curves.html
Visuals: captured from real browser rendering
<canvas id="stage" width="360" height="210"></canvas>
<script>
  const ctx = stage.getContext("2d");
  ctx.strokeStyle = "#0f766e";
  ctx.lineWidth = 6;
  ctx.beginPath();
  ctx.moveTo(40, 160);
  ctx.quadraticCurveTo(120, 30, 200, 150);
  ctx.bezierCurveTo(240, 70, 280, 200, 320, 130);
  ctx.stroke();
</script>

  1. Start the curve path.

    The canvas is blank while a new path is opened.
    beginPath resets path geometry; pixels are still untouched.

  2. Move the cursor to the first anchor.

    The path has a start but no visible curve yet.
    moveTo positions the cursor without drawing.

  3. Add a quadratic curve through one control point.

    The path now bends through an invisible control point.
    quadraticCurveTo extends the path with one control point and one end point.

  4. Add a cubic Bezier curve through two control points.

    The path now has a longer S-shape ready to be stroked.
    bezierCurveTo extends the path with two control points and one end point.

  5. Paint the curved path.

    A teal ribbon weaves across the canvas, blending the quadratic and cubic segments.
    stroke draws the accumulated curve geometry.
quadraticCurveTo A quadratic curve uses one control point between the start and end anchors.
bezierCurveTo A cubic Bezier curve uses two control points for richer shapes.