Start learning with our library of video tutorials taught by experts. Get started
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.
One of the most basic things that you need to set when you're going to draw on the canvas is usually involving some kind of color and style, and the canvas 2D drawing context provides some global properties that affect how objects are stroked and filled. And there are three properties. The first is the fillStyle. That's the style to use when filling a shape. And you can set this to anything that you would normally set a CSS color property to. So, for example, you can use a CSS color or a gradient or a pattern, and this defaults to black if you don't set it.
We'll take a look at gradients and patterns later. We'll focus on colors for now. In addition to the fillStyle, there is a strokeStyle. And again this is the same idea. You can set this to a color or gradient or a pattern, and also defaults to black, and this is the color or style that's you used when strokes are drawn, usually lines or outlines on objects that have an area. And then there is the lineWidth property, and this is the width of the imaginary pen that the canvas uses when it's drawing lines. And that defaults to a width of one, but you can set to anything.
There is two-step process involved to draw with colors and styles. Step one is you set the fill and stroke styles and the line width to whatever values you want, and then you call a drawing operation that creates some shape, or does some kind of drawing thing. So let's take a look at that in code and see how it works. Okay, so here I am in my editor, and I'm going to start off with my example colors_start.htm file. If we look at this in the browser really quick, you can see here is our canvas, and I've outlined it so we can see it.
So, let's go back now to the code. Now in my Snippets under the Color section, I'm going to first copy these two lines and paste them into here. So we go through all the operations to get our drawing context to make sure that we have a valid canvas and everything, and then I set the fillStyle to be green. And then I call an operation called fillRect and that's going to fill the rectangle with this color. So let's go back to the browser and refresh, and you can see that, sure enough, a green rectangle shows up on the canvas.
Now let's use the strokestyle, so back in my Snippets, I'm going to copy the next three lines, copy, back to the code, and we'll paste those in here. So in this example, now I'm setting the lineWidth to be five and in the strokeStyle I'm going to use the CSS style declaration of RGB and Alpha. And I'm going to set the color to be 100% opacity of blue. And this time I'm going to use the strokeRect function, and this will actually fill the rectangle.
This has put a line around the edge. So we save. When we go back to the browser, we refresh, and now you can see that we have a green rectangle with a blue outline around it. So what we've done here is demonstrate some basic drawing operations on how to set the filling and stroking style, along with the width of the pen, to affect how things are drawn onto the canvas, And these kinds of properties will affect lots of different things that you draw on the canvas, so this is a pretty basic thing to learn how to do.
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.