Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
To actually draw things onto the canvas, we need to use the canvas's 2D drawing API and to do that, let's take a look at how it works. Now drawing on a canvas requires a series of steps. And in step one, we need to retrieve a reference to the canvas; in other words, we have to actually get the canvas element out of the page. Once we've got a reference to the canvas element, we get the drawing context from it using the getContext () method that we talked about a little bit earlier. Now if the result of the getContext () call is not null, then you know you have the drawing API and you can go ahead and start using it.
Now to do this in script, let's imagine we have the following example. We've the canvas tag that's defined. This is the same way we've been defining our canvas tags up until now. We've got an ID, width, height, and some fallback content. So to draw in script, this is how it goes. Typically, you would do something like define a function. You would call getElementById to get the canvas element. Once you've got the canvas element, you then ask for its context. So here we are saying canvas element.getContext, and we're passing in 2D, because we want the 2D drawing API. And if that result is not equal to null, then we can go ahead and draw, and then you close the function and off you go.
So the canvas drawing API in 2D is pretty comprehensive. It's broken up into three groups. The first group has to do with shapes. There are rectangles, lines, arcs, paths, colors, and styles. There are different kinds of curves, such as Bezier and Quadratic, and then there is text. The next group has to do with how things are drawn. There are various compositing properties we can use, patterns and gradients. You can create shadows. You can also create clipping paths, and we'll investigate all of these later. And then finally there are things like transforms, images and video, and you can even access the raw pixels of the canvas in order to do some pretty interesting effects. And throughout the rest of this course, we'll see how to do each one of these.
So let's take a really simple example to begin with. Let's actually draw on the canvas using the 2D drawing API. So I'm over here back in my code editor again, and I'm going to open up my example. And in this case, I'm going to use the contextdraw_start example, under chapter 04, so I open that. So here is our file. There is our canvas. Here is the code we're going to write. I can go copy these lines from the snippets under ContextDraw. So I'll copy, and we'll go back to the source code and we'll paste it in here.
So what we're going to do now is use the 2D drawing API to put that light gray background that we saw earlier into the canvas. Now, I don't expect you to necessarily understand all this right away. It's just a simple example to show you how this works. So first, we get a reference to the canvas element by calling getElementById canvas. Then we say hey, do we have the canvas object, and is there a method named getContext? And if there is, we then call the getContext method using 2D as the argument.
That gets us the 2D drawing API. And then finally, if all that was successful, on the context, we say set the fill style to be light gray, and then we're going to call a function called fillRect and fillRect takes a couple of arguments. There is the origin to start drawing at, 0,0, and then the width and height of the rectangle you want to draw--in this case, the width and height of the canvas. So you've probably guessed by now what this does. It's going to fill the entire canvas with a light gray background. So let's go ahead and save. All right, let's go over to the browser.
So I am going to bring this up in the browser, and you can see that's exactly what happens. So now the canvas has been filled in. Let's go ahead and view this in another browser to make sure it is working correctly. I'll open this in Firefox, and there is the same result. So that's a pretty simple example of using the 2D drawing API to fill a rectangle with a gray color, but it gets a lot better than that.
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.