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?
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…
Frequently Asked Questions (FAQs) about HTML5 Canvas Quadratic Curves
What is the purpose of the quadraticCurveTo() method in HTML5 Canvas?
The quadraticCurveTo() method is a powerful tool in HTML5 Canvas that allows you to draw complex and smooth curves. It takes four arguments: the x and y coordinates of the control point, and the x and y coordinates of the end point. The control point acts as a kind of “magnetic force” that pulls the curve towards it, creating a smooth, curved line. This method is particularly useful for creating graphics and animations where smooth, curved lines are required.
How do I use the quadraticCurveTo() method to draw a curve?
To use the quadraticCurveTo() method, you first need to create a path using the beginPath() method. Then, you can use the moveTo() method to set the starting point of your curve. After that, you can call the quadraticCurveTo() method with the appropriate arguments to draw the curve. Finally, you can use the stroke() or fill() method to render the curve on the canvas.
Can I draw multiple quadratic curves on the same canvas?
Yes, you can draw multiple quadratic curves on the same canvas. Each curve will need its own path, so you’ll need to call the beginPath() method before drawing each curve. Remember to use the moveTo() method to set the starting point of each curve to ensure they don’t connect.
How can I fill the area under a quadratic curve?
To fill the area under a quadratic curve, you can use the fill() method after drawing the curve. This will fill the area enclosed by the curve and a straight line from the start point to the end point with the current fill style.
Can I change the color of a quadratic curve?
Yes, you can change the color of a quadratic curve by setting the strokeStyle property before drawing the curve. You can set this property to any valid CSS color.
How can I make a dashed quadratic curve?
To make a dashed quadratic curve, you can use the setLineDash() method before drawing the curve. This method takes an array of numbers that specify the lengths of alternating dashes and gaps.
Can I draw a quadratic curve with more than one control point?
The standard quadraticCurveTo() method only supports one control point. However, you can simulate multiple control points by drawing multiple quadratic curves with their start and end points connected.
How can I animate a quadratic curve?
To animate a quadratic curve, you can use the requestAnimationFrame() method to create a loop that redraws the curve with different parameters. This can create a variety of effects, such as a curve that moves, changes shape, or pulses in size.
Can I use the quadraticCurveTo() method to draw a circle or ellipse?
While it’s possible to approximate a circle or ellipse with a quadratic curve, it’s generally easier and more accurate to use the arc() or ellipse() method, which are specifically designed for this purpose.
How can I debug issues with my quadratic curve?
Debugging issues with a quadratic curve can be tricky due to the complexity of the math involved. However, a good first step is to check the coordinates of your control and end points. You can also try drawing the control points and connecting lines to visualize the curve’s shape.
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
