Canvas API Basics

[00:00:00]
>> Mathew DesLauriers: So just another couple API basics would be let's learn about circles. Once we get the basics, we can start to apply those but first I just wanna sort of show. How do we draw circles? How do we draw lines in that kind of stuff? So if you go through the docks, you'll see this, this is here.

[00:00:20]
I'll just open this a bit wider. So in the Canvas API docs, you can go to reference, CanvasRendereingContext2D, and then they have a lot of different examples here. And what we're gonna be looking for is a method called arc, and it's under paths. This is the method we're gonna be looking for, arc.

[00:00:41]
And this is how we draw circles from the Canvas API. So if I go back to my sketch, the way it works is you specify the beginning of the path. So you say, okay, I'm gonna start rendering a path, and when you do this begin path then everything after it is gonna be part of this path operation.

[00:01:04]
And we're going to just draw a single circle in the center of the screen, just to test things out, using the arc function. And the parameters are x and y coordinates, the center of the circle that we're gonna draw. And the best way to think of this is like, if you had one of those old school compasses that swings around the circle.

[00:01:21]
What's the center of that compass? We can just say width divided by 2, height divided by 2. The radius of the circle, we can just say 200 or something, whatever you want. Then this is the start angle and the end angle. So how far around our circle we go?

[00:01:37]
So start would be 0, and the end angle would be 2 pi which means full circle in radians. Cuz these angles are in radians, not in degrees. And so pi would be half a circle, and 2 pi would be a full circle. And then the last parameter, just true or false whether we're swinging around in clockwise or counterclockwise, but because we're gonna be doing a full circle, it doesn't matter so we can just say false.

[00:02:05]
And then lastly, once we specify the path then we fill it or we stroke it. So fill would be like this. You do .fill and you're not gonna see anything yet. And that's because our fill style is still set to orange. So, like I was saying it's a state sort of based API, and so we have to change this fill style from orange to something else before we fill.

[00:02:29]
So I'm just copy, pasting. Just gonna do red. So now we have a red circle in the middle of our 2D canvas. And we can start tweaking these numbers, you can make them bigger, and start to get a sense of what these numbers do. If you've never used this before then you can move things around and so on.

[00:02:48]
You can also try changing 2 pi to 1 pi. Then all of a sudden you'll have a semicircle, and this'll be kinda cool later on when we're doing our own experimental art stuff. And then, the next thing to know is stroking, so we so far we're just filling shapes.

[00:03:04]
But there's another command, another function called stroke. And stroke will take whatever path you have before it, and it's gonna outline it. And we can't really see it on the screen, so that's because this stroke is very small. By default, it's a very small one pixel black stroke.

[00:03:22]
So we're gonna make it thicker. And remember these parameters that we're gonna be changing have to be set before we do the stroke function, otherwise it's not gonna really work. So we just do lineWidth. Let's say the lineWidth of our stroke is gonna be 20. And let's say the, yeah, lineWidth is 20 or 40, or whatever, something thick.

[00:03:46]
And you'll notice it's black, and that's because fill style is different than stroke style. So here, before we stroke, we can change the color of the stroke by doing stroke style to something else. So, this is kind of, this is the API basics. And if you're new to the Canvas API, you can sort of copy this, and maybe paste it somewhere else and just use that as reference.

[00:04:13]
I've also included this def in the cheat sheet. Here it is in the cheat sheet and you can look through the cheat sheet and there's a few things like circles, and that kind of stuff in the cheat sheet just to remind you. But if you're already familiar with the API, you might be thinking, okay, this is easy stuff.

[00:04:29]
So don't worry. We're gonna make it a bit more complicated, but I just wanted to make sure everyone's on the same page with that.