How to Draw Quadratic Curves on an HTML5 Canvas

Drawing graphical curves within the browser has never been easy. Until recently, if you wanted a smooth chart, you either had to generate an image or create an SVG on the server. Creating a curve on the fly required ninja JavaScript skills, a mathematics degree and immense patience.

The canvas element has changed everything. We can now draw and animate complex lines, curves and shapes with a few lines of code. Today we’ll look at quadratic curves.

What are quadratic curves?

It’s been a long time since I took a mathematics lesson, so please don’t expect an in-depth explanation! If you’re interested, take a look at the migraine-inducing equations at WolframMathWorld

Back already?

quadratic curve

Like any line, a quadratic curve has a start (P0) and end point (P2). It then has a single control point (P1) which determines the curvature of the line. This image from Wikipedia provides a good curve generation illustration.

Quadratic curves are great for drawing smooth edges. As you can see from this image, it’s easy to specify a control point where the squared edge would normally appear.

Enough math — let’s see some code!

The canvas element supports quadratic curves. First, we require a little initialization to get the canvas context and set the default line width and color:


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 quadraticCurveTo() method can now be used to draw a quadratic curve. It takes four arguments:

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

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


ctx.quadraticCurveTo(250, 100, 400, 250);
ctx.stroke();

You’ve done well to get this far, so I’ve created an interactive canvas quadratic curve demonstration page (sorry, it won’t work in IE8 and below). Drag the control point or either end of the line and it’ll generate the code for you.

In my next post, we’ll create some more interesting shapes using bézier curves…

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • JIm

    Wouldn’t this stuff work in IE 6-8 with the excanvis.js patch by Google?

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

      Quite possibly, but that wasn’t really the point of the article or the demonstration code. A shim or progressive enhancement could be used in a production environment.

  • Andrew

    They have ruined the fun with the quadraticCurveTo() method already built-into the canvas object. Also exists is the bezierCurveTo() method.

    Seems everything is covered except pseudo-3D (meaning rendered without WebGL or similar), and I’d love to see a library for that.

    What is also very missing (in mainstream) is a Flash-like application to create canvas games, animations, etc in a way most Flash animators and programmers are used to. And no current application in Office exports to canvas (would be particularly useful for PowerPoint). Adobe is said to be working on the next Flash which will output both HTML5 and Flash.

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

      There are several canvas libraries and toolkits specifically for 3D and games. But, it’s worth noting that canvas has only been around a couple of years and not all browsers support it yet.

    • Shiva

      Agree. A Flash-like animation application for HTML5 would be fantastic. But, in my usage, I found Flash to be awful for creating animations – it seemed very inconsistent and fiddly. And if Adobe does manage to get Flash to HTML5 working, we are going to be stuck with the same sucky Flash interface. So, let’s hope someone else figures this out soon.

  • Alexw

    Wow, some slick coding there, Craig!

  • [Unknown]

    Its great but my question could be or is dumb – when can we use this? like in what scenario we want to use it?

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

      Charts and diagrams are obvious choices but, essentially, it’s anywhere you’d use a canvas element and need a curve!

      • [Unknown]

        hmm ok… thanks but i only understand this when i will do it practically… i have one web design on hand, so thinking of trying it…

        thanks anyway!!!