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.
In this movie, we were going to see how to draw some basic shapes. Now we've already seen these couple of times in other examples, but let's take a deeper look at how rectangles and lines are drawn. Now, rectangles are the only primitive shapes supported by canvas. Unlike, say another technology like SVG that also supports the ellipse, the canvas only has the rectangle as what is called a primitive shape. It's a shape that's very simple to draw and it only requires one routine. Rectangles are pretty much the only primitive one supported by canvas.
There are three functions for operating rectangles. The first one is the clearRect function, which erases the rectangle defined by the parameters you give it. In other words, it makes the area fully transparent; it gets rid of the contents of that rectangle. The other two are strokeRect and fillRect. strokeRect outlines a rectangle with whatever the current stroke style is, and fillRect fills the rectangle with whatever the current fill style is. Now all three of these rectangle-drawing operations take a starting point of the upper-left corner of the rectangle that you want to draw--that's the point where the rectangle will start-- and then a width and a height.
It makes a rectangle as wide as you say and as high as you say. Unlike other drawing systems where you give it all four points, here all you need to do is specify one point and then how high and how wide you want the rectangle to be. Lines are a little bit different. Lines can be created using a variety of settings for how lines join together and how they end. So let's take a quick look at the line operations. The first two functions, moveTo and lineTo, are used to get ready to draw a line.
So the moveTo function moves the imaginary pen to the given point, but it doesn't actually draw anything. Imagine you are picking you are picking the pen up from the paper and moving it to its new location. The lineTo actually does draw a line from whatever the current pen point is to the new point that you give it. The next three properties, lineWidth, lineCap, and lineJoin, determine how the line looks on the screen. So we have already seen the lineWidth before. That determines how wide the line is. The lineCap defines how the ending of line is drawn, and there's three properties.
There is the butt property, which is default, or you can draw lines with round ends or square ends. The lineJoin property determines how lines join together when you do multiple line tos, making the join as a round join, a bevel join, or a miter join, which is the default. The miter limit is related to the miter join, and this the limit at which line joins are cut off and are drawn as bevels. And that defaults to 10, and we'll see that in a moment. The beginPath begins a new set of drawing operations, and the stroke function collects all the current path commands and then draws them.
So we will see how to do that in a moment. But first, let's get started drawing some basic rectangles. So in my snippets, I'm under the Rectangles section, and I am going to open up my file called rectangles_start. And here is where I am going to paste my code in. So I am going to go back to the snippets, and I am going to take the first two sets and I am going to copy that and paste it in. So in this case, we are going to draw first a stroked rectangle, and it has a blue line that is five pixels wide, and then we are going to draw a fill rectangle.
So let's save and go to the browser. Okay, so you can see there is the operations right there. There's the stroked one. There is the filled one. Let's go back to the code. So now I'll copy and paste the other two. Actually, I'll do this one first. I'll copy that. We'll paste it in. In this case, we have a rectangle that's both stroked and filled. So the stroke will be red and the fill will be yellow. Then we have increased the lineWidth to 10. So we've set the new properties, and then we draw.
So we fill and stroked the rect, so let's save and refresh the browser. You can see that now you got three rectangles, different kinds of properties. And then lastly, let's clear a rectangle. So I am going to copy and we'll paste. So here is what we are going to do. We are going to create a rectangle that cuts across all three of the rectangles we drew previously. So you can see that this rectangle starts at the 25, 25 point, near the upper left, and has a width of 100 and a height of 125.
In fact, they all have the same height and width. They just happen to start at different X points so that they move further and further to the right along the canvas. And then the clear rectangle is going to start at the X of 15, so before the first rectangle. And the Y point of 75, and it is going to be 450 pixels wide and 50 pixels high. So let's save this and see what it does. So when we refresh, see all three rectangles got drawn, but then a rectangle right here got cleared out from underneath them.
So that's how you can clear a rectangle. Let's now take a look at the lines. So I am going to go back to my example file. I'm going to open lines_start now. So here is the starting point. Let's go back to the snippets. So now let's go up to the lines section, which is right there, and we've got varying examples that we are going to do. So the first example, we will copy these lines right here. We'll copy and we'll paste. Let's review with these do.
So what we are doing here is creating a for loop that goes from 0 to 10, and we are going to draw lines of varying widths. Now, to draw a line, the way that you do this is you always begin a drawing operation with the beginPath function. That tells the canvas that a path operation, which lines are part of, are about to begin. So then we set that lineWidth. In this case, we are going to set the lineWidth to whatever the loop counter is +1 pixel. So it will start off at 1 and end at 11. And then we are going to move to the X position here and the Y position defined by the current line that we were drawing.
And then we are going to draw a line to the X position of 475 and the same Y. So this will draw 10 lines of varying widths, and after each line is drawn, we call stroke. That actually fills the line in. So the process is called beginPath. Do your line operations. Then call stroke, and that will stroke the lines, so let's do that. We are going to save, and then we are going to go to the browser. You can see in the first example that's what's happened. You started off drawing lines of varying widths, going from 1 up to 11 and from this X to this Y.
Now, let's see how to draw lineCaps. So to draw lineCaps, we are going to go back to snippets and we are going to copy this code over, and we are going to copy these lines. Remember, there's three end caps. I will copy that. So we'll paste it below this one here. So notice that we've got three canvases: we have got canvas1, canvas2, and canvas3. So the canvas1 is going to be the line widths. The next canvas would be done with line caps.
So let's scroll back up. Here's canvas2. So what we are going to do is draw two guidelines so we can clearly see how the line ending caps are different for each operation. So we draw two cyan lines of width 1 at the left and right side of the canvas, and then we are going to draw lines using each one of the lineCaps. So we are going to set our lineWidth to be 25 and the strokeStyle is going to be black. And then we are going to draw one line with the butt style, one with a round style, and one with a square style, from this position to this position.
So we begin the path, we move, we line, we stroke. And then we do it again: beginPath, moveTo, lineTo stroke. That's the operation for drawing a line. So we save. Let's go back to line example and refresh, and you can see right there, there is the cyan guidelines that we drew. There is the first one. There is the second one. And you can see the start and the end point for each line goes from one cyan line to the other. So here is the butt example, here is the round example, and here is the square ending.
You can see how each one of those line caps has a different appearance. And let's finish up using the lineJoins. So now for the third canvas, we are going to copy these lines right here, go back to our lines, and we'll paste it in. So, similarly to the last example, we get the canvas, in this case it is canvas3. We are going to set the lineWidth to 15 and the strokeStyle to black, and then, again, for each one of the lineJoins, we are going to round, bevel, and miter.
So then we begin the path, move, line, and line. So we are going to draw one line up and one line down, and then we stroke it. So we do one for each of those. We save. Back here in browser, we are going to refresh, and you can see that the three line joins have now been drawn. So there is the round line join, there is the bevel line join right there, and there is the miter line join, where the miter line just continue these two lines here up to a point where they both meet. Now the miter limit controls how much of a ratio there is before the miter gets cut off and looks like a bevel.
So it defaults to 10. Let's go back and play with that for a second. Let's set the context's miterLimit to 20, and we'll save and let's refresh that. So no effect on that one. Let's try it again. Let's put it down to say 5, refresh. One more time, let's put it down to 1. And you can see that when I set the miterLimit low enough, suddenly the miter gets cut off and turned into a bevel.
So that's how you use the miterLimit. All right! So in this example we have seen how to draw lines of varying thickness, varying end cap styles and varying join styles.
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.