• Introduction
• Green’s Theorem
• Cubic Bézier Curves
• Quadric Bézier Curves
• Lines
• Rational Quadratic Bézier Curves

Introduction

There exists a lot of material covering the arc length of Bézier curves, since it is a common requirement in stroke dashing, animation, etc. The arc length integral for a cubic Bézier, for example, doesn’t have a closed form solution, so there has been many pieces of writing devoted to different computations and approximations.

There exists much less information, however, about the calculation of the area of a Bézier curve. At first it might seem like it would be more complicated than the arclength, but as we’ll see it actually has a very simple closed form solution.

There has been previously published derivations for the area of cubic Bézier curves, and quadratic Bézier curves and lines are of course a subset of those curves.

I have not found a derivation of the area of rational quadratic Bézier curves (conic sections) however, and this article additionally attempts to derive a solution.

Green’s Theorem

The area of a closed simply connected piecewise-smooth curve can be computed via Green’s Theorem. I won’t spend very much time covering the maths, it is covered well in most Calculus books (ie Stewart’s Calculus). Green’s Theorem shows that certain types of double integrals over a 2D region have an equivalent line integral. In the case of computing the signed area of a curve, you would simply integrate 1 over the region:

Green’s Theorem allows to this be stated equivalently as a few different line integrals:

Note that this formulation is for the standard curve orientation — the signed area is positive for counterclockwise curves and negative for clockwise curves. Some other derivations are in the opposite order (ie Jackowski).

We can choose whichever form of the line integral is most convenient, they should all simplify to the same result (more on that later). Taking the first form and writing it in terms of a typical parametric of t from 0 to 1:

For closed piecewise curves (closed paths with multiple segments), the area is simply the sum of the area of the segments (keeping consistent orientation of course).

Cubic Bézier Curves

Here we run through the above 3 line integrals for cubic Bézier curves.

Note that while the three results are similar, they are not exactly the same:

You can see that the different forms differ by some factor of x3y3 and x0y0. However, since we have a closed curve, as we go along, the next segment’s x0 and y0 will be the previous segment’s x3 and y3. So instead of adding the x0y0 and x3y3, only to then subtract it again on the next segment, the 3rd form simplifies the expression by canceling the redundant terms across the segments, and thus has 2 less components in the expression. This is the same cancellation that is common in the calculation of signed polygon area, and we’ll see this later. As we extend this to process paths with segments of mixed types of curves, it will be important to use the same integral form across all types. The 3rd form we’ll use matches the derivation by Kalle Rutanen.

Below is a JavaScript function to compute the area of a cubic Bézier segment.

function bez3_sauc(x0, y0, x1, y1, x2, y2, x3, y3) {
  return (  x3*(  -y0 - 3*y1 - 6*y2) -
          3*x2*(   y0 +   y1 - 2*y3) +
          3*x1*(-2*y0 +   y2 +   y3) +
            x0*( 6*y1 + 3*y2 +   y3)) / 20;
}

Note that this calculation uses an expression arranged around the x components, but there are perhaps cases where it is better numerically to arrange the expression in another form.

Quadric Bézier Curves

The same process for quadratic Bézier curves.

function bez2_sauc(x0, y0, x1, y1, x2, y2) {
  return (  x2*( -y0 - 2*y1) +
          2*x1*(  y2 -   y0) +
            x0*(2*y1 +   y2)) / 6;
}

Again this calculation is arranged around the x terms.

Lines

The same process for lines.

function line_sauc(x0, y0, x1, y1) {
  return (x0*y1 - x1*y0) / 2;
}

We have of course arrived at the shoelace formula, specifically the form:

Rational Quadratic Bézier Curves

Rational quadratic Bézier curves, also sometimes referred to as conic sections, add an additional weight parameter to expand the representable curves to include ellipses and hyperbolas.

Moving from a polynomial to a rational function makes the integral much more involved.

The result of the integral has some conditions attached, the graph above shows that the result isn’t valid when $w < -1$. There are some singularities at $\pm 1$, this corresponds to when the curve is a parabola. Anyway when $w = 1$ the curve is equivalent to a non-rational quadratic Bézier, so it is a case we already have a solution for.

We can break the problem into three ranges:

Although it would be nice to support negative weights, most graphics systems limit weights to being positive. As stated by Ron Goldman: “Negative weights, however, may introduce singularities even if we restrict the parameter domain, so negative weights are generally avoided.”

Additionally there are some problems directly implementing the above equation, as some of the subexpressions are complex. We can manually rearrange the expression so the subexpressions are all real on $0 < w < 1$:

We still have another difficulty in terms of implementation. As w approaches 1, the denominator will go towards zero and thus the fraction will approach infinity. However we know the answer should be approaching that of a non-rational quadratic Bézier as we approach 1. In order to implement this stably we need to better understand the asymptotic behaviour. The key here is to understand the series expansion of arctan.

As w approaches 1 the argument of arctan approaches 0, and as x approaches 0 arctan(x) approaches x. We can use an approximation based on a truncated series expansion to cancel out the denominator and produce a stable rational expression for use when w is near 1.

Similarly we can rewrite the equation in terms of the inverse hyperbolic tangent so that all subexpressions will be real for $w > 1$.