By Craig Buckler

How to Draw Bezier Curves on an HTML5 Canvas

By Craig Buckler

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.

bezier curve

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.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);

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?

  • 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?

    • 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

        Ohh I don’t know about that! This article and the prior one about quadratic curves helped me a lot. Thanks!

      • 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?

    • 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.

Get the latest in JavaScript, once a week, for free.