We'll start off by creating a canvas element, and we'll give it a super semantic and helpful ID called canvas. We'll head on over to our style.css file. There, we're going to call out our canvas element. We're going to give it a width of, let's say, 200 pixels and a height of 100 pixels -- rectangle shape.
The canvas variable will then allow us to get the context. We'll say const context=we'll use our canvas variable, and we'll say get context, and inside that pass it to D. From here on out, we won't use our canvas variable. That was just to grab the context. From here on out, drawing, animating, what have you, we'll use context.
Let's draw a simple rectangle shape. We'll of course use the context. We'll say context. fillRect, for rectangle. This will take four parameters, an X, a Y -- I want to start at the top left -- and then a width, and a height. Nifty trick you can do is say canvas width and canvas height.
Now, we'll see that we have a black rectangle that is filling up the exact width and height we gave our canvas in the CSS. If I go back to the CSS and I change that to, say, 400, you'll see that the rectangle inaudible really, really long. We'll change this back to 200.
If we wanted to, we could give it a custom width and height. It doesn't have to match its parent canvas. We could say 50, 50. You'll see now that it is a square. Woo-hoo-hoo. Super exciting.
A quick note, if you made your width and height larger than the canvas bounds you gave, all you would see is a black rectangle that was 200 by 100. This is because any shape that's larger than your canvas just gets cut off. Our rectangle is 50,000 by 5,000, but it's being cut off by the canvas bounds.