So now that we've learned how to set up the canvas element on our web page, let's start putting stuff on it and we'll begin by drawing some basic shapes so that you can actually use some methods and properties provided by the object which is returned by the get context to the method that we talked about briefly in the previous code cast. And we will start off by drawing a rectangle and square inside of the canvas. And I'm using the same project file as in the last podcast. And here you can see that I have set up a canvas element on my web page with an I. D. Of my canvas inside here, the html document. And this is what it looks like so far. And we did do some CSS as well. So we gave the canvas element a width and height property and we also gave it a border. So we don't need to do any CSS uh in this code cast, I'll close that off and we don't need to do any html either. We'll be working in the script dot Js file. So let's start now by drawing a rectangle and square onto the canvas. And for this we'll use something called direct method. And this method takes four arguments an X coordinate, Y, coordinate. And it with an height. So first things first let's actually get a reference to the canvas on in our html with let canvas is equal to document. Get element by I. D. And the idea of the canvas element is my canvas. That's true. Okay, now after this we must also set a two D. Context for a canvas with the get context method. So let's do that. Let context is equal to canvas dot get context. And remember that canvas has a three D. And two D. Context. We'll be using the two D. Context and pass in Cody and there you go. Okay, so let's next step. What I'm going to do is I'm going to say, well I want to make a red colored rectangle. So let's set the color of the rectangle by using something called the fill style property with context dot Phil style. And the value of this property is a strength which is going to be a number uh color. So red. Right now we haven't actually drawn anything. I've just set up the color property. And next let's apply the read method. Uh And to do that remember it takes four arguments so context dot wrecked. This is going to take in four arguments X and X. Access why access and width and height. So let's start off with 10 units along the X axis and also 10 units along the y axis. And then my rectangle is going to be 100 pixels in width and 40 pixels in height. Now if I control and save this right control S and I go to my canvas preview here the page. You're not actually going to see anything drawn to the canvas. Right? So to do that, let's first let's do context. Okay dot Phil And I'll just clean what this method does. Now the film method on the context is going to fill the rectangle with the red color. And next we need to draw the canvas, the rectangle onto the canvas. And for that we do context dot stroke. Okay. And once again control S. R two safe and let's take a look at this. Uh it seems I have to save everything and then go up here because I forgotten the keyboard shortcut for the html preview, enable preview. Okay, what's going on here? Oh this is a script dot Js preview. So it seems I do need to have this open and now I am going to see the preview form html and there you go. So we have a nice red rectangle drawn onto the canvas which we can see here on our screen. Now there's another way of doing this. And what I can do is actually use the stroke wrecked method and pass in some arguments. And what the stroke wrecked method is doing is that it's going to draw the outline of a rectangle. So I will go ahead and comment this out and I'll comment this out as well and in place. And since we are not going to fill anything inside of the rectangle there's going to be no colors. I'll comment this out as well and now what I can do is maybe even comment this out. We don't need it. And what I'll do is context got stroke wrecked and then I'll pass in the same arguments as we did before and control us to save and there you go. Now we can see that we have this rectangle with an outline. Okay, so there's no colors filled in and to make this rectangle into a square. All that we need to do is change the height because the width and the and the height of a square will be the same. So I'll change this to 100 control S and there you go. So now we have a square drawn onto the canvas and this is all for this code cast. And in the next podcast we learn how to draw a circle onto the canvas.