# Drawing a curve with Canvas

Canvas offers two powerful features for drawing curves, *quadraticCurveTo* and *bezierCurveTo*.

In the previous tutorial, we have seen how to draw a line with Canvas. This is for a straight line, to draw a curve, two methods are offered, between which we can to choose for a graphic application.

A **quadratic curve** is a parabola, thus an arc, possibly asymmetric.

The starting point is given by *moveTo(x, y)*.

The center of the curve depends on the control point cpx, cpy.

The end point is at x, y.

A **bezier curve** is a combination of arcs, it has at least two control points that can reverse the direction of the curve.

P0 is the entry point given by *moveTo(x, y)*.

P1 is the control point cpx1, cpy1.

P2 is implied.

P3 is the control point cpx2, cpy2.

p4 is the endpoint x, y.

It is easier to chain curves such as ripples on the water with a Bezier function. A tree branch may have the shape of a parabola as a quadratic curve or the double curve of a Bezier function.

For this demo we will use a quadratic curve and it is drawn with the **quadraticCurveTo** function.

The plot of a such curve depends on three points, the **starting point**, the** control point** which marks the outer limit than met the curve and the **ending point**. The shape of the curve depends on the relationship between these three points.

The full syntax to obtain this curve requires three functions:

*beginPath*starts a new curve.*moveTo*gives the starting point of the line.*quadraticCurveTo*has two pairs of argumenst: the control point ctx, cty where is reversed the direction of the curve, and the end point x, y.

You can specify the color and thickness with the same functions that were already used to draw a straight line:

*strokeStyle*: color.*lineWidth*: thickness.

Demonstration

Full source code:

<canvas id="canvas1" width="400" height="150" style="border:1px solid #CCC"> Canvas requires a modern browser: Chrome, Firefox, IE9, Safari. </canvas> <script> var canvas = document.getElementById("canvas1"); if (canvas.getContext) { context = canvas.getContext('2d'); } function drawCurve() { context.beginPath(); context.strokeStyle='red'; context.lineWidth=4; context.moveTo(20,100); context.quadraticCurveTo(200,10, 300, 100); context.stroke(); } drawCurve(); </script>

To see how the function uses the coordinates we placed black dots at the three coordinates used to plot the curve ...

function drawDot(x, y)

{

context.beginPath();

context.fillStyle='black';

context.arc(x, y, 4, 0, 2 * Math.PI, true);

context.fill();

}

drawDot(20, 100);

drawDot(200, 10);

drawDot(300, 100);

We see that the curve does not reaches the checkpoints, the algorithm traces two imaginary straight line segments and a curve within these two segments without exceeding them.

*You should also know ... *

- To draw curves more accurately, with multiple inflection points, you can use a micro-framework such as Smooth.js. An interactive demo show how to convert lines to curves.