Start learning with our library of video tutorials taught by experts. Get started

HTML5: Graphics and Animation with Canvas
Illustration by John Hersey

Drawing complex shapes: Bézier and quadratic curves


From:

HTML5: Graphics and Animation with Canvas

with Joe Marini

Video: Drawing complex shapes: Bézier and quadratic curves

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.
Expand all | Collapse all
  1. 4m 54s
    1. Welcome
      1m 3s
    2. Using the exercise files
      2m 3s
    3. Using the HTML5 Canvas element in the real world
      1m 48s
  2. 10m 31s
    1. Real-world example: CanvasMol
      2m 9s
    2. Real-world example: Raphaël-JavaScript Library
      1m 47s
    3. Real-world example: The Wilderness Downtown
      4m 1s
    4. Real-world example: Sketchpad
      1m 10s
    5. Real-world example: Pirates Love Daisies
      1m 24s
  3. 3m 28s
    1. Installing the tools
      1m 29s
    2. Exploring the Canvas examples used in this course
      1m 59s
  4. 8m 58s
    1. Introducing the Canvas tag
      6m 30s
    2. Understanding the differences between Canvas and SVG
      2m 28s
  5. 5m 36s
    1. Identifying the Canvas element's methods and properties
      1m 40s
    2. Using the Canvas drawing context
      3m 56s
  6. 43m 14s
    1. Setting and using colors and styles
      3m 19s
    2. Drawing basic shapes: Rectangles and lines
      10m 21s
    3. Understanding the Canvas state
      5m 15s
    4. Drawing complex shapes: Arcs and paths
      9m 15s
    5. Drawing complex shapes: Bézier and quadratic curves
      5m 46s
    6. Rendering text
      9m 18s
  7. 32m 35s
    1. Creating shadows
      6m 41s
    2. Drawing with patterns
      7m 20s
    3. Drawing with gradients
      6m 18s
    4. Using clipping paths
      4m 46s
    5. Drawing images and video
      7m 30s
  8. 35m 42s
    1. Transforming objects using the translate tag
      4m 18s
    2. Scaling objects with the scale transformation
      4m 7s
    3. Rotating objects with the rotate transformation
      4m 33s
    4. Applying a custom transformation
      6m 58s
    5. Compositing in Canvas using globalAlpha
      6m 36s
    6. Manipulating raw pixels
      9m 10s
  9. 41m 23s
    1. Building an image slideshow control
      4m 24s
    2. Using smooth transitions in a slideshow
      4m 28s
    3. Creating a basic animation
      5m 42s
    4. Creating animation with double buffering
      13m 13s
    5. Incorporating Canvas into a real page
      13m 36s
  10. 48s
    1. Goodbye
      48s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
HTML5: Graphics and Animation with Canvas
3h 7m Intermediate Jun 03, 2011

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.

Topics include:
  • Understanding the differences between Canvas and SVG Graphics
  • Drawing shapes
  • Drawing arcs and paths
  • Rendering text
  • Using clipping paths
  • Drawing images and video
  • Transforming objects with the translate tag
  • Manipulating raw pixels
  • Applying a custom transformation
  • Creating an animation or slideshow control with Canvas
Subjects:
Developer Web Animation Web Design Web Development
Software:
HTML
Author:
Joe Marini

Drawing complex shapes: Bézier and quadratic curves

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.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed HTML5: Graphics and Animation with Canvas.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked