Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- 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
Skill Level Intermediate
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.