Canvas also includes functions for creating Quadratic and Bézier curves. These methods are shown below:

quadraticCurveTo(cp1x, cp1y, x, y) bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

If you are new to Quadratic and Bézier curves, they can be difficult to get used to. For both:

1. Start with a line with a stated start point and end point.
• The start point is the current position, which you can set using the moveTo(x,y) method.
• The end point is set with the last two arguments of the method: x and y.
• Just one for a Quadratic curve.
• Two for a Bézier curve.
3. Imagine that these control points are tugging at the straight line created by the start and end points. By doing so, they create a curve.

The best way to see how they work is to practice with them a little. We've built small HTML5 applications for doing so.

Practice

1. A 500x500 Canvas.
2. A menu in the upper right with as Start Over button for clearing the canvas and controls for setting the color.
3. A textarea immediately below the Canvas, which holds the generated code, in case you create a drawing you want to use somewhere else.
4. A list of the current curve point values to the right of the textarea.

To use this application:

1. Click anywhere on the Canvas to set a start point.
2. Click a second time to set an end point.
3. Click a third time to set the control point.
4. Click a fourth time to start over; that is, to set a start point for a new curve.

You may change the color any time before the fourth click to set a new color for the curve.

Play around with this for a little and then open html5-canvas/Demos/bezier.html in your browser to play with creating Bézier curves. This application is the same, except that the fourth click sets a second control point.

If you generate a drawing you like:

1. Open html5-canvas/Demos/test-bed.html in your editor.
2. Copy the code from the textarea in the curve application.
3. Paste it between the start paste and end paste comments in test-bed.html and save.
4. Open test-bed.html in your browser. You should see your drawing there.