In my last post, we created quadratic curves on HTML5 canvas elements using a few lines of code. If you examined the JavaScript on the quadratic curves demonstration page, you may have noticed several references to béziers — its curvier cousin.

## What are bézier curves?

You’ve possibly seen bézier curves used in desktop publishing and graphics packages. So let’s take another trip to WolframMathWorld to look at the equations.

I’m sure you understood that but I’m feeling a little nauseous.

In the last post, we saw how quadratic curves have a start point (P0), end point (P2) and a single control point (P1) which determines the curvature. In the case of canvas, a bézier curve has a start (P0), end (P3) and two control points — one for each end of the line (P1 and P2). Thanks again to Wikipedia for a great illustration.

Béziers give far more control over the shape. Because the initial part of the curve follows its control path, we can generate curves which reverse direction or wrap on themselves. They are ideal for creating a Visio-like flow diagram where you need to join two shapes by a connector.

## On to the code!

Like before, we require a few lines of JavaScript to get the canvas context and set the default widths and colors:

``````
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d")
ctx.lineWidth = 6;
ctx.strokeStyle = "#333";
``````

We now define the starting point for our curve (P0):

``````
ctx.beginPath();
ctx.moveTo(100, 250);
``````

The bezierCurveTo() method is then used to draw the curve. It requires six arguments:

• the x co-ordinate of the curve start control point (P1)
• the y co-ordinate of the curve start control point (P1)
• the x co-ordinate of the curve end control point (P2)
• the y co-ordinate of the curve end control point (P2)
• the x co-ordinate of the end point (P3)
• the y co-ordinate of the end point (P3)

Finally, we call the stroke() method to complete our curve:

``````
ctx.bezierCurveTo(150, 100, 350, 100, 400, 250);
ctx.stroke();
``````

The interactive canvas bézier curve demonstration page allows you to drag all the points and generate the code (sorry IE fans — you’ll need to wait for IE9).

I hope you found this series useful. Are you using canvas curves for any interesting projects?

## Free Guide:

### How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

• Susanne F

now I feel really nauseous – I bet it will help when I start to do it :)
Thanks for sharing this – it is most useful (provided I get it!)

• Michał Czernow

I’m not using canvas for anything for now, but when I decide to learn some tools it provides, I surely turn to Your tutorials. Thanks for this awesome series meshing high theoretical complexity and useful simplicity.

• Fred

Say you had a line with an arbitrary number of points (eg 6 x/y pairs), which would be the best function to use to get a curvy line, and more to the point, how on earth would you go about doing it?

• http://www.optimalworks.net/ Craig Buckler

It depends what you want to achieve, but you could join each point with a bezier curve. To ensure it’s smooth, the control point for each curve start should at 180 degrees to the control point for the curve end it’s attached to.

Wohh, I think I’ve made that sound more complicated than ever!

• Fred

• Balajee

The best way to go about fitting a “curvy” line through an arbitrary set of points would be to fit a piecewise-continuous Catmull-Rom spline segments through each pair of points. However, I suppose there isn’t built in support for Catmull-Rom splines in HTML5 canvas.

• anjali

Béziers give most controls use and good..

• Marcelo

The html5 capabilities are really impressive, for now html5 have two models: canvas and svg. Maybe in the future can compete with flash? what you think?

• http://www.optimalworks.net/ Craig Buckler

I still think Flash has it’s place – especially for action games and interactive videos.

However, HTML5 provides an alternative. Charts and diagrams are certainly viable.

• Boat Point Park

The information which i really don’t know thanks for that.

### Recommended for you

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.