Page 9: Béziers in APIs

Both Canvas and SVG support Bézier curves. Both APIs provide commands for both cubic and quadratic Béziers. Technically, they support linear Béziers, but we usually call these lines.

Bézier Curves in Canvas

The HTML Canvas API provides both quadratic and cubic Bézier curves. It allows you to use these curves as pieces of longer paths.

One thing that is slightly surprising about Bézier segments in Canvas is that they take one fewer control point as an argument than the curve needs. The first control point is always the most recent pen position. So, if you want to give the four points of a Bézier segment, you need to do a moveTo first to get that first point:

1
2

context.moveTo(ax, ay);
context.bezierCurveTo(bx, by, cx, cy, dx, dy);

This is convenient because we often want to connect segments together. The end of the last segment becomes the beginning of the next. $C(0)$ continuity is easy. If you want $C(1)$ or $G(1)$ continuity, you need to choose the position of the point (bx,by) appropriately.

Bézier Curves in SVG

SVG supports Bézier curves as part of its “path language”. When you make a path, you can include commands to add quadratic and cubic Bézier segments.

Here is an example of a path created in SVG. The file is 05-09-quadratic.svg

 1<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
 2    <path
 3        stroke="black"
 4        fill ="#CCC"
 5        stroke-width="5"
 6        d="M150,100 
 7           Q 150,150  100,150
 8           Q  50,150   50,100
 9           Q  50, 50  100, 50
10           Q 100,100  150,100
11           z"
12    />
13</svg>

Notice that the shape is a single path, made up of 4 quadratic Bézier segments. The path description is in a string, broken up over lines 6-12. You can see it starts with a move to (M) command (line 6), and then the 4 quadraticBezierCurveTo commands (Q). It also has a “close path” (Z) command at the end.

Notice that the quadratic Bézier commands take two points as parameters. Like the Canvas commands, the first point is the current pen position. The first curve starts at the move to position. The others connect to the ends of the previous segments, so they have $C(0)$ continuity. Because of the positions of the control points, most connections are $C(1)$ (except for the ones that obviously aren’t).

Practice: To practice reading SVG and writing Canvas Bezier curves, I would like you to reproduce the picture above (in 05-09-quadratic.svg) in Canvas in the files 05-09-01.html and 05-09-01.js.

But, to make this more interesting: you are not allowed to use the quadraticBezierTo command in your JavaScript program, you must use the bezierCurveTo function (which is cubic). You will need to convert the quadratic (3 point) curves to cubic (4 point) curves. In general, converting Bézier curves between degrees is tricky, but for the special case of 2 to 3, it is easy. A hint: figure out the tangent vectors for the quadratic, and use them to determine the control points of the cubic. The end points are easy.

Your turn: A Picture

In this box, you can practice using the canvas Bézier drawing commands. The canvas context has functions that put Bézier segments onto the end of the current path. Just as context.lineTo(x,y) extends the current path with a line segment from the current end of the path to x,y, the context.bezierCurveTo function extends the path with a cubic Bézier segment. The function takes 3 points (the segment uses 4 points as it includes the end of the path before the function is called). Paths with curves can be stroked and filled like any other paths.

Make a picture in the box below using Canvas drawing commands. Your picture must use curves (cubic Bézier curves - with the Canvas bezierCurveTo function). You should edit 05-09-02.js ( 05-09-02.html). Your picture must have shapes that are obviously curves (not straight lines) - it should be clear that they are not circles or arcs.

In at least one place in your picture, you must connect two Bézier segments with $G(1)$ or $C(1)$ continuity. Describe one or two places where you connected Bézier segments with continuity in 05-09-02.txt (tell us where to look, we should see a place with continuity. For example “at the top of the mountain, two lines come together with $C(0)$ continuity” - except that your example must be $G(1)$ or $C(1)$).

This year, we are not giving extra advanced points for artistic merit. But, it’s more fun to make cool pictures (both for you and for us).

Summary: Bézier Curves

Bézier curves are discussed in FCG4 Chapter 15 section 15.6.1. Here, we focused on the specific kinds of Bézier curves we see in Canvas. We see the connection with Hermite (and therefore Cardinal) cubics and how they are drawn in Canvas. The list of properties is in the book, but they are important.

On the next page, we will consider a general problem with parametric curves - not just Beziers.

Next: Arc-Length Parameterizations