Start a free Courses trial

to watch this video

In this video we create our own quadratic and bezier curves using the canvas. We look at how the curves are defined, and how to choose your control points.

[Think Vitamin Membership, membership.thinkvitamin.com] 0:00 [HTML5 Canvas Quadratic and Bezier Curves with Jim Hoskins 0:07 In the previous video, we used arcs to add fixed-radius 0:13 curves to our shape. 0:16 Now we're going to create some more free-form curves by utilizing Bezier 0:18 curves and quadratic curves. 0:21 Now the two methods that allow us to draw more free-form curves 0:23 are called quadratic curves and Bezier curves. 0:26 In this demo I have both of them drawn out. 0:30 At the top we have what we call a quadratic curve. 0:33 And a quadratic curve is defined by a beginning point, 0:36 and ending point, and a single 0:39 control point. 0:42 Now the curves will normally be only this black line, but in this demo I've 0:44 highlighted both the control points, as well as the lines 0:47 to and from the start and control points. 0:50 So we define it by beginning a start and an end point 0:53 and a control point. 0:56 Now by manipulating this demo, you can see how the control point 0:58 affects the curve. 1:01 So if we pull the curve more down and towards the right, we 1:03 get this long beginning curve and then a short 1:06 tight curve towards the end. 1:09 You can see that our curve to begin with starts with the curve being very 1:12 parallel with the line being drawn from the beginning point to 1:15 the control point and then begins to diverge. 1:18 The same thing happens towards the end, and it becomes 1:21 more and more parallel to the point from the control point 1:24 to the ending point. 1:27 So a common use of a quadratic curve is maybe a corner in a box, 1:29 where you would normally have a right angle. 1:32 Now instead of drawing your lines all the way to the corner, 1:35 what you might want to do is draw your line almost to the edge 1:38 and start a curve and place your 1:41 control point right where the lines would intersect, and then place your ending 1:44 point some distance away from that point again. 1:47 This will give you a nice curved point, and 1:50 you can see how easy it is to define your points relative 1:53 to a normal corner. 1:56 Now let's look at the code that we use to create this curve. 1:59 Our quadratic curve starts like any other path with a 2:03 begin path call. 2:06 The I create a moveTo call that moves to a 2:08 start X and Y, which would be the first point in our curve. 2:11 Next, we call the quadtraticCurveTo method. 2:15 [.quadraticCurveTo(cpX, cpY, Y)] 2:18 This takes a control point, X and Y, 2:20 and an ending point, X and Y. 2:23 So the control point is this blue point right here, which will be 2:26 invisible in your actual curve, and your ending point will be 2:29 where your curve actually ends. 2:32 So the further that your control point is out 2:34 from the line drawn from your start to your end, 2:37 the bigger of a curve there will be. 2:40 Finally, we can just stroke it and we see our curve. 2:43 Now similar but different to our quadratic curve, 2:47 is what we call a Bezier curve. 2:50 It differs in that it has two control points-- 2:52 a control point for the beginning and a control point for the end. 2:55 So as we move the different control points around, 3:00 you can see that we have a different sort of curve evolving. 3:03 Again, you can see how the curve becomes more and more parallel 3:07 with the line drawn from the end point to the control point 3:10 or the start point to the control point. 3:13 That's really useful when you want to connect the two line segments 3:16 or two different shapes and have the curve 3:19 be parallel or perpendicular 3:22 to a certain point. 3:25 Let's say we had another corner. 3:27 We could do a similar thing where, if we had a line going 3:29 here and across, we could place our start 3:32 point on that line and our first control point 3:35 as an extension of that line. 3:38 So if our line was going to the right, we'd draw our control 3:40 point as an extension of that. 3:43 Then we can place our end point at the corner, 3:46 and if our ending line is going up and down, we can 3:49 place our second control point directly above 3:52 and that will create a nice angle. 3:55 But compared to the quadratic curve, we have a lot more control. 3:58 For instance, if we moved our control points much closer, 4:02 you can see we get a longer 4:05 section in the middle with a less tight corner. 4:08 You'll notice that we still--if we have 4:11 a line coming out from here--we still have our curve 4:13 be a natural extension of that line because it starts going off in the same direction 4:16 as the line instead of having some sharp corner 4:19 like it would if we were going from here down to here. 4:22 Now since we have two control points, we can create 4:26 much more complex shapes by manipulating 4:29 the control points into different directions. 4:32 With the quadratic curve we can only have really one curve. 4:35 We can adjust its sharpness in the different areas, 4:38 but you can't have it curve one way and then the other. 4:41 With a quadratic curve, we have all sorts of different options. 4:44 So for instance, we can curve down and then curve the other way. 4:49 This is great for maybe connecting two different shapes. 4:52 We can see the usefulness of a quadratic curve in this 4:56 example here, where we want to connect two different 4:59 divs together with a flowing line. 5:01 So in this case, I want our line to come out of the right side, 5:04 so I want it to appear that the wire is coming directly 5:07 out of the box. 5:10 So in this case, I put my beginning point right at the edge of the box here, 5:12 add a control point some distance out, but 5:15 directly out from the first point. 5:18 Similarly, the endpoint is right here, but the control point 5:21 for this exists somewhere out here. 5:24 So that allows us to create a line that appears to be going 5:26 directly into and out of our boxes. 5:29 Now with a little bit of change in the code, I can change how the two 5:32 boxes are connected. 5:35 Instead of the point coming out with a rightward direction, I can now 5:37 create a curve that goes this way. 5:40 So in this case, I still have my beginning point at the edge of the box, 5:43 but now my control point is downwards, creating a 5:46 downward-looking curve. 5:49 These curves can be integrated into any other shape. 5:51 If for instance, I began with a 5:53 moveTo to the origin of 00 5:56 and I instead draw a lineTO 5:59 the beginning point, and 6:02 at the end of our curve I draw a lineTo 6:05 600, 400, 6:08 we can see that we integrate a line with our curve. 6:13 So a line going from here to here/ 6:17 Then we can easily draw a curve and then continue drawing more 6:19 and more lines. 6:22 And the same thing can be done with our quadratic curve 6:29 and maybe even integrate it into a shape. 6:32 So here I've created a shape from 50, 100, 6:36 and then to our beginning point, a curve to our end point 6:39 and a line to another point, 6:42 and I close out the path. 6:45 If we flip over, we can see we now have a shape we can manipulate. 6:47 Now we've seen how to draw all sorts of different shapes using the canvas. 6:54 In the next video, we'll look at how to use transformations to make it eaiser 6:57 to draw shapes anywhere on our canvas. 7:00 [Think Vitamin Membership, membership.thinkvitamin.com] 7:03

You need to sign up for Treehouse in order to download course files.

Sign up