Drawing a Quadratic Beziér Curve

The first kind of Beziér curve we will learn to draw is the quadratic version. A quadratic Beziér curve is made up of a starting point, ending point, and a single control point that determines the nature of the curve:

By adjusting any of these three values, you can customize how your curve looks. In the canvas world, you represent these three values as arguments you pass in to the quadraticCurveTo method:

The first two arguments determine the x and y positions of the control point. The last two arguments specify the x and y positions of the ending point. You may have noticed that we don’t specify the starting point anywhere. The reason for that is simple: The starting point is automatically calculated based on where your virtual pen is - either based on what you had drawn earlier or explicitly positioned using the moveTo method.

Here is an example of of the quadraticCurveTo method in action:

The main thing to keep in mind is that drawing curves is really no different than drawing lines or any other shape. The same rules about drawing, closing shapes, applying a fill, and other canvas-specific things apply here as well. If you look at the code, except for the quadraticCurveTo method, all of the various drawing methods we used should be very familiar for you.