To compute a point on a quadratic Bezier curve in code, evaluate this function for a value of t between 0 and 1:

function quadraticBezierPoint(t, P0, P1, P2) {
  const u = 1 - t;
  return {
    x: u * u * P0.x + 2 * u * t * P1.x + t * t * P2.x,
    y: u * u * P0.y + 2 * u * t * P1.y + t * t * P2.y
  };
}

That is the only formula you need. The three inputs P0, P1, and P2 are the start point, control point, and end point of the quadratic segment. The parameter t is a normalized progress value from 0 (at P0) to 1 (at P2). For the full explanation of what each weight in the equation means and how the control point shapes the curve, the quadratic Bezier curve formula page covers the math in detail.

Sampling t From 0 to 1 Produces Drawable Points

Calling quadraticBezierPoint once gives a single location. To draw the full curve, sample many t values at a fixed step and collect the resulting points:

function quadraticBezierPoints(P0, P1, P2, numPoints = 50) {
  const points = [];
  for (let i = 0; i <= numPoints; i++) {
    const t = i / numPoints;
    points.push(quadraticBezierPoint(t, P0, P1, P2));
  }
  return points;
}

With numPoints = 50 you get 51 evenly-spaced samples. Connecting those points with line segments produces a clean visual approximation of the quadratic Bezier curve in Canvas 2D or WebGL. The full interactive Bezier curves tutorial shows this sampling alongside the control polygon and De Casteljau interpolation to build a complete picture of how the curve relates to its control points.

// Example: draw the curve on a Canvas 2D context
function drawQuadraticBezier(ctx, P0, P1, P2) {
  const pts = quadraticBezierPoints(P0, P1, P2);
  ctx.beginPath();
  ctx.moveTo(pts[0].x, pts[0].y);
  for (let i = 1; i < pts.length; i++) {
    ctx.lineTo(pts[i].x, pts[i].y);
  }
  ctx.stroke();
}

The more points you sample, the smoother the drawn curve looks. 50 points is usually enough for a curve that spans a few hundred pixels. For curves that occupy more screen space or need sharper detail, increase to 100 or 200 samples.

Why This Approach Is an Approximation

Connecting sampled points with straight segments is a simple rendering strategy, not the only production method. Each segment between two sampled t values is a straight line, so the true curve bends slightly inside each interval. With enough samples those gaps become invisible, but the approach trades accuracy for simplicity.

Production rendering systems often use adaptive subdivision instead. The idea is to check whether a smaller piece of the curve is flat enough to draw as a single straight line before sampling it. If the piece is too bent, the algorithm splits it into two smaller pieces using De Casteljau subdivision and checks again. This gives fewer total points on flat regions and more on tight bends, which looks the same while using fewer line segments. You can explore that geometric subdivision visually in the interactive Bezier curves tutorial, which includes a De Casteljau construction view that shows how splitting works step by step.

For interactive tools, UI animations, and quick prototypes, uniform sampling with 50 to 100 points is fast, readable, and good enough. The code stays concise and the intent is clear: evaluate the equation, walk from 0 to 1, connect the dots.

SVG Has Built-In Quadratic Bezier Support

If you are drawing into an SVG element, you do not need to sample points at all. SVG path commands include native quadratic and cubic Bezier segments:

<!-- Quadratic Bezier: M start, Q control, end -->
<path d="M 10 100 Q 90 10 180 100" stroke="black" fill="none" />

The Q command takes the control point followed by the end point. The browser or SVG renderer evaluates the curve internally and draws it at full resolution regardless of zoom or scale. No sampling, no approximation, no numPoints tradeoff.

SVG also offers a smooth variant T that reflects the previous control point, which makes chaining multiple quadratic segments easier. The interactive Bezier curves tutorial covers how SVG path commands represent the same control-point geometry shown throughout this article.