Viewers: in countries Watching now:
One of the most exciting additions that HTML5 offers to designers is the ability to draw free-form graphics on a drawing surface known as the Canvas. In this course, author Joe Marini introduces the technical concepts behind Canvas and shows how to perform drawing operations directly in a web page. The course covers drawing basic and complex shapes, setting colors and styles, adding shadows, patterns, and gradients, more advanced techniques such as scaling, rotating, and compositing objects, and how to incorporate Canvas elements in a slideshow and an animation.
You can actually get fairly advanced with some of the drawing operations that are possible with the canvas. In fact, the canvas lets you draw Bezier and quadratic curves. The way curves are drawn is in the case of Bezier curves, there is a starting context point, and an end point that uses two what are called control points to determine how the curve is drawn. Quadratic curves are similar. They use a start point, but they only have one control point and one endpoint.
So Bezier curves because of those two control points, they let you draw curves that are slightly more complex. So let's take a look at each one. The Bezier curve has a starting point, which is right here, the context point. That's the end point right there. And there are these two control points. These two control points control how the line curves towards the control point in each case. So you can see that because this end point is close to its control point, the curve is a little bit different over here than it is over here.
And for quadratic curves there's only one control point. So you set the context point, set the control point, and the end point and you can see that the curve is slightly less complex than what you get with Bezier curves. So the functions for drawing these curves are right here. So like other paths, you first use the moveTo function, which we saw when we learned how to draw lines in a previous movie. So you move to a pen location, and then you call bezierCurveTo, and then you supply a series of points. cx and cy represent the control points.
So this is the first control point, this is the second control point, and then this is the end point. It's similar for quadraticCurveTo: you use moveTo to move to a start point, and then you supply a control point and an ending point. So let's take a look at this in a real live example. So here I am in the code editor, and I've got my curves section right here of my snippets. So let's open up an example file, and what we're going to open up is curves_start.
This is the starting point for our curves example. So I'm going to go and copy the first example here. So we'll pick up the stroke and lineWidth properties, and we will call this right here, and we'll paste this in and save. All right, let's take a look at how this looks in the browser. We should have a Bezier curve that's 5 pixels wide and blue; sure enough, we do. Now that's pretty cool, but we can make it a little bit more instructive to actually see where the control points are.
So let's go back to the code, and we'll go back to the snippets. And what we're going to do now is make the control points visible. So we'll copy and we'll paste this code in. So what we have here now is a full example. So we call beginPath, like we do with all paths. We move it to a location. Then we call the bezierCurveTo, and we supply a whole bunch of points that determine how the Bezier curve is drawn. And then we call stroke to actually fill it in. And to make the control points visible, we're going to define a strokeStyle that's 25% opacity of black with a pixel width of 1.
And then we're going to simply call moveTo and lineTo. And if you look, we're basically going to line-to each one of the control point locations, so that we can see what effect the control points have on each one of the points on the Bezier curve. So let's save and let's refresh, and you can see that these are where the control points are up here now, and we can actually change the control points. So what we can do is change that one to say 300, and that's this guy here. So let's save.
Let's refresh. You can see the effect of moving the control point to no location. So there is the curve. You can see that the curve is being affected by these control points. So now, let's do a quadratic curve. Same idea. We're going to take the curve and the control points, copy, and we're going to come out of here and paste those in.
So now in this case, we have a green line that's five pixels wide and just like with all paths, we begin the path. We move to the starting location, and then we call quadraticCurveTo, and we supply the necessary points there. There is the control point, there's the ending point, and we call stroke to make the curve visible. And then we have some instruction code right here that makes the control point visible. So let's save. Let's refresh.
You can see that now here's our quadratic curve, and there's the control point up there, and we can play with that a little bit. So it starts out at 400, 200--that's the starting point--and then the curve goes straight up from there. So let's actually move that one over a little bit, to 500 say, and we'll change the instruction code as well, and we'll refresh. You can see that by moving the control point, that affects the curve. In this example, we've seen how to draw curves using Bezier and quadratic math, and we've seen how changing the control points changes how the curves are drawn.
There are currently no FAQs about HTML5: Graphics and Animation with Canvas.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.