 Okay, continuing our HTML5 Canvas Tutorials. I hope you enjoyed last week's with the drawing of a line. Today we're going to draw rectangles. Yay! And if I, there we go, oh, that's not supposed to happen. There we go. The browser I was using last week was Epiphany. I was using that because it automatically refreshes, and then I thought to myself, if I screw up in the middle of a tutorial, it'd be nice to have the Google Chrome console. I don't know if Epiphany has one. It's troubleshoot stuff. So I'm back in Chrome here, which is my normal browser just to let you know. But here we go. I am going to open up a HTML file I started creating called RectangleBasic. And it has our basic, most of the tutorials are going to start off with this. I'm not going to type this every time. It has our HTML tags, header tags, body tags, our basic Canvas element, and it starts our JavaScript here creating our Canvas variable and our context variable. If you don't understand that stuff, watch last week's tutorial. There should be a link somewhere or an annotation to the entire playlist, and I suggest watching it in order, if you can. So now that we've already created our context, we're going to use it. So just like when we created a line, we're going to say context.beginPath, and we're going to say context.rect for rectangle. And a rectangle has four points, so we're going to give it those positions. We'll say 200 by 50 by 200 by 150. I'm kind of making up these numbers as I go along. And then we will say, let's see if we can just context, I'm kind of going away from my notes here, which I do have notes because I am still not very comfortable with the Canvas stuff, so I have to look at my notes. But we'll just stroke that out. So there we go. That did work. We drew a rectangle here. So let's have a look. If I change this to 100, save it, refresh that. You can see that the first number is our left position, and our next position should be our top position. So if we put this to 150, it will lower our rectangle. And let's put that back up at 50. And then if I change this to 100, you can see that that is the left of the other side. So I guess the right of the rectangle. And then this should be the bottom location. So we want to set that to, we'll say 75, and when we refresh that you can see it got shorter because it wasn't 150 down. Now that being said, do take in mind, unlike a line that when you drew from one point to another you were doing absolute position, this is relative position. So basically we've got our left, our top, and then we've got our width and height is basically what these are. And when I say basically, yeah, that's what they are. Now we drew a simple little box, but just like the line, we can give it different styles. So I'm going to go ahead and say context.lineWidth. And that should be a capital W. It is case sensitive. And we'll say 15. We'll save that. And now we should have a thicker box, thicker rectangle drawn. OK, so now that we have that, we can also change the color just like we did with the line. We can say context.strokeStyle equals, and we'll say red, we'll save that. And there we go. We now have a red box. Now we can also tell it what color we want the inside of our rectangle to be. So here I can say context.fill, and we'll say a fill style. And here we give it a color. So I'll just say blue. And you'll notice that the colors are not necessarily case sensitive. So I can do a capital B or a lower case B. And either should work. Although if I hit Ref5 here, it doesn't refresh because we told it what we want the style to fill, but we did not tell it to fill. So here we'll say context.fill, calling that function to fill it. Save that, refresh, and now we have a blue box in the middle, red box on the outside. So and again, just like last time, if we wanted to draw another box, we could just copy this, and then we will paste it. And so now here we are, we drew our stroke, which remember that has to go at the end because that's when it's drawn. If you put this before these other options, it won't know that you want the line with or the style to be whatever. So the stroke will definitely be at the end because that's when it's actually drawn. Now this other one, we have all the same parameters. So if we were to save this and refresh this, there's two cubes that look identical to each other on, or two rectangles on top of each other that look identical and you can't see them because they're right on top of each other. So let's take this one. And once again, they're drawn in order. So if you draw one and then draw another one, the second one will be drawn on top of the first one. Let's bring this down to 50, and this down to 25, and we'll make this 200, and this we'll say 150. We'll save that. So now the first cube is larger and positioned a little different. I'm going to hit F5 here to refresh this. Now you can see the one cube inside the other. Yep. That's pretty much it for this tutorial. So last time we drew lines, this time we drew a cube and we filled it up, or a rectangle and filled it up. Still, very, very simple. Hope you're not too bored. We're going to get into some pretty cool stuff further down the line here. Just for fun, I'll go over all this real quick here. We create a canvas element. We start our JavaScript here. We're calling it after the canvas has been loaded, so you can either put it in line here or there are ways to do it in the header, depending on what your goal is and what your preference is. But we're going to say the variable, we're going to look at the document, which is our web page, look at the elements, find the elements with my canvas in this case. Here's the ID, my canvas, so we're talking about that. We're going to look at that element, the canvas element, and we're going to say get the context. In this case, it's 2D. Actually, in this case, we're setting it to 2D. And then we're going to say context, that object, which again, you can call this whatever you want. You don't have to call it context on this side of the equal sign. And then you would just do the same thing for all these. But we're going to say take that element and we're going to begin a path. We're going to draw a rectangle with these parameters. We're going to fill it with this color and then at that point, we will fill it. We're going to say line width and give it a width. We're going to give the outer line a color and then we'll draw it. And then we did the same thing all down here again with a second box, a second rectangle. So that's it. I thank you for watching. I hope you enjoyed the tutorials. And they'll get more exciting as we get further in. Basics can sometimes be a little boring, but I hope this is helping you. A lot of the tutorials I've seen out there for Canvas stuff don't start with the basics and then it's a little hard to grasp. And once again, I went through at a website called html5canvasetorals.com and they have great tutorials over there. And most of all, I'm going to be teaching you is pretty much all from what I learned over there in the notes I took. So very similar stuff if you wanted to jump ahead and go over there. And then if you want, you can just keep watching each Friday for the next couple of weeks as we go through the basics and get a little more advanced, get into physics and stuff and then also 3D stuff at one at some point. So and we'll make some maybe at some point some basic games or something. And the great thing about this Canvas and doing it this way is very easy to port it to something like a tablet or a phone, anything that has a modern browser. So thank you for watching. Please visit filmsbychrist.com. That's Chris at the K. There should be a link in the description and I hope that you have a great day.