 Okay, we are continuing our HTML5 Canvas tutorials here, and today we're going to be working with circles and semi-circles. Last week we worked with ARCs, and very, very similar. So let's go ahead and jump in. If you haven't watched the previous tutorials, be sure to watch those. There should be an annotation to the entire playlist, and right now we're just going through the very basics of drawing shapes on a 2D canvas in HTML5. Here's our basic HTML setup. We've got our HTML tags, header, body, and then inside our body we've got our Canvas elements, and then we start our JavaScript down here. Now, last time I put a X and Y position into our ARC method manually, and this time I'm going to use a variable. Just to show you, I wanted to show you that you could, and if you've done any type of program, you already know this, you can put into functions variables or the actual string or integer data. But whenever possible, it's usually best to put them into variables. So here I'm going to say canvas X equals canvas dot width. Now this is something I haven't gone over before. You can get attributes from our canvas. So here we're getting our canvas width, and we're dividing it by two. What does that do for us? Well, that gives us the center from left to right of our canvas. So if we want to center our circle in the middle of the canvas, well, this is how we get that information. And that way, if our canvas changes size, well, we can update X, and it automatically knows. Rather than putting in an integer that you might have to manually change, if you want to change the size of the canvas, then you got to go change the number if you still want it centered. We're going to do the same thing for Y, but instead of canvas dot width, we're going to say canvas dot height, and we're going to divide that by two. So in this case, our canvas is 300 pixels, so dividing it by two would give us 150. The width is 600, dividing it by two would give us 300. So we could put those numbers in. Once again, if you change the size of your canvas, you would have to go and change each of those variables. Variables are very handy to prevent you from a lot of work when you change stuff. So we're also going to give our circle a radius, and we'll go 75. I think that's what we did in the last tutorial initially. So what we're going to do here is we're going to call the arc method, which is a function. First we have to say context using our context that we've created up here. And we're going to say once again, as always, begin path because we're going to be drawing something we've got to begin our path. Next we're going to take our context, and we're going to call the arc method, and we're going to put x and y into there, and then we're going to give it the radius. And now, this time, for what we're going to do is we're going to throw in some math here. We're going to say 0 comma, and we're going to say 2 times, and we're going to call the math function from JavaScript, and we're going to say pi. So it's going to give pi, I don't know what decimal point JavaScript goes down to when it's calculating pi, you know 3.14, blah, blah, blah, blah, blah, but I'm sure it's pretty accurate. Yes, I mean, how can you talk of accuracy when you're talking about pi because it just keeps going, right? So what this is going to do is going to allow you to start. This is your start position, and then you got your end position. So we're starting at 0, and then we're going to go all the way around and basically to where we started, and the way we figure that out is 2 times pi. I'm not much of a mathematician. I used to really love math, but I've been at a school for almost 13 years now. So I don't know how they figure this stuff out. I'm sure someone will comment below. Someone smarter than me on that topic. And then false, that's whether we're drawing clockwise or counterclockwise, and you know what? It really matters since we're going all the way around the circle, just whether we're drawing all the way around or not. And really, since we're drawing a circle, we didn't put these in the variables we could have, but if you're drawing a circle and it's always going to be a circle, those things are not going to change. Now, well, we're going to get in semi-circles and stuff here in a little bit, but now we can say, just like always, context.stroke, save that, refresh up here. We've got a circle. And as always, since we're using the arc method just like we did last time, and as I said, arc method is just like drawing a line or a rectangle. It has the same little attributes you can give it. We can also say context.linewith, because it is a line that we're, well, it's not really a line, but in this concept we are. It is a line. Give it a width, a line width, so that's the thickness of the line. We'll set it to 15. We'll also say context.strokeStyle equals, and I'm going to say blue. I like blue and refresh up here. Oh, forgot the arc and stroke. Just to let you know, I forgot the arc and stroke. We've got no errors up here. JavaScripts usually fail silently so that not to disrupt your website. If you have something small, it may stop the script, but not cause all these alerts and stuff. But as a developer, I'm using Chrome here, and Chrome has a built-in thing, sort of Firefox, but I think, as far as Firefox is built in, I prefer Firefox Firebug, although it's been a while since I've used Firefox. But while we're in here, if I hit F12, it brings up our little console down here. I can go to the console tab, and F5, I thought that it would give me an error here. What I was about to show you is not true. I don't know why it's not showing an error there. I would think that if I'm calling, I misspelled something in the code, and it's not working, it would show up there. Only it does. I'm sure someone will tell me why it didn't get this. But we'll say stroke there. It was just a type on my behalf. Now we have a blue circle. So just ignore the stuff I was just saying about the console. The console is a good place to go. If you're having issues, normally it will show you the errors there. I don't know why it didn't in this case. So now that we have that, now we can also, just like a rectangle, we can give it a fill style, which is the color, and then fill it. So let's go up here, we're going to say context, and we'll say dot fill style, and we'll say red, and then we'll say context dot fill. So that's kind of like saying stroke, it's just for the fill. So you can set the fill style, but if you don't actually fill it, it doesn't matter what you set it to. So there we go. And of course, if I move this down here, it doesn't really matter so much what order we put the line width, the styles in, as long as the fill and stroke are after the attributes we're setting to them. So that's drawing a circle. What I'm going to do now is save that. Once again, I'm using Vim as my text editor. I don't know if I said this at the beginning of this tutorial. Vim is a text editor that I prefer. Use whatever text editor you prefer. I'm going to copy what we just created because I'm going to try to upload all these to my Payspin account. If you guys want to look at them, there should be a link on my website, hopefully, to all the scripts that I post on my Payspin, and if not on Metal X1000 at Payspin, I think you can search that. I'm going to copy this to Semi or Semi, however you pronounce it, basic.html. And so I've copied that. Now I can just go Vim. And that will just save us some time typing some stuff because we're going to draw a semi circle and it's actually going to be similar. So it's actually just like drawing an arc. So if instead of doing Pi like so, let's say I put in two here and I save that and I have five, refresh this, oh right, I have to actually go to the new file, Semi. So there we go. I have drawn an arc and I have filled it. It looks kind of weird because it's not really filled, if you wanted to make a shape like that, but let's also cap it off. So what we're going to do here is, in our context, we're going to add in a close path. Once again, case sensitive, capital P there. And so we're going to close our path. Anytime you're drawing a path, I believe anytime you're just drawing a path, you can close it by doing that and we'll just close the two ends. So if I hit F5 there, you can see it takes from one to the other there. Also I mentioned in a previous tutorial that we can also do what you would call it, the caps. The line caps should fit into this so by default it's doing it, but that just sounds funny. Okay, context dot, what was I doing again? All right, the line cap. We can say line dot, sorry, line capital C cap, and we will set that equal to, and it can be square, but or I'm going to do round in this case, but is the default. If we refresh this, I'm not sure if this is, no, I thought that would work. So that's twice I've tried something in this tutorial that did not work. I thought that would give a rounded edge to this little sharp point there. I think maybe if I don't close it there, it gives that a rounded edge. So without that round, it will default to butt or you can put butt in there. We'll save that and it's flat, but with the round in there, it's rounded, but that doesn't really matter if you are closing the path. I wonder if the order of that matters. Let me put this up here, P. Nope, does not matter. So as far as I know, you can't round off those edges. I'm sure there's probably a way I just don't know. So as I make mistakes, you learn from my mistakes. So that's how you close the path, which gives a little more of a whoop there. So that's a semi-circle, which is basically an arc, but we're closing it off, giving you that semi-circle feeling there. So we could also, if we were to set the fill style to blue as well, once again, when you're giving it the color, the color scent case doesn't really matter. So there you can also do that. The fill color doesn't have to be a different color than the style color, giving you kind of a half-circle there. So that's it for the tutorial. I hope that you're enjoying these tutorials on HTML5 Canvas. Once again, we're just going over the basics now. You'll be moving into more advanced stuff as time goes on. Thank you for watching. I hope that you enjoy them. Visit FilmsByChris.com. That's Chris at the K. There should be a link in the description. If you do like these HTML5 Canvas tutorials and you're looking forward to the fun stuff as we get into 3D elements in the Canvas, definitely comment below. Give it a thumbs up. Let me know that you're liking these so that I know people are enjoying them. I hope that you have a great day.