 Okay, continuing with our HTML5 Canvas Tutorials. Once again, I'm going to use Vim as my text editor, but feel free to use whatever text editor you prefer. Today, we're going to be creating arcs, which is a curve, and to explain it, to create an arc on HTML5 Canvas, we're going to call the arc method, which is a type of function. We're going to define it with a center point radius, starting angle, ending angle, and direction to draw, which can be either clockwise or counterclockwise. And you can also give it line styles, just as you would a line that you're drawing. You can give it a width, stroke style, and line cap, you know, those properties that we had in the line. So, let's go ahead and we'll get this started. I'm going to do my best to explain it. Once again, I picked up, I learned most of my HTML5 Canvas stuff from a website. I want to give them credit, HTML5CanvasTutorials.com. So, my tutorials are going to be very similar to what they have on their page, because I took notes from what I learned. And note-taking is very important when it comes to learning programming, because you can't remember everything, but if you keep good notes, you can look things up quickly. So, once again, I'm going to use Vim as my text editor. I've already created a basic HTML file. So, here's my ArcBasic. We're looking at it up here. It displays nothing. It does have a Canvas element. We're going to, inside our JavaScript, which we have in line here, we have our Canvas variable, and that's going to look at our Canvas elements, and then we're going to get the context that we're setting it to 2D. And now at this point, we'll create some variables. Now, these things we can put directly into the method, the Arc method, but it's always good to use variables, but I'm also going to, for the X and Y positioning, I'm going to just throw those numbers into the method when I call it. But later on, we'll change that, and we'll put variables in there instead. But for right now, things we need, we'll need the X and Y. Once again, I'm just going to throw those numbers in there. I'm going to go variable. We're going to create one called radius. Creating variables also makes it easier later on if we want to animate stuff. We want to move the X and Y. It's a little bit easier to have those variables rather than, I don't know how else you would do it. But we're going to say the radius is 75. Next, we're going to create a variable, if I could type, a variable, and this will be the start, and we will set the start equal to, we'll say 3. If you look at a lot of tutorials, they do a mathematical equation there using pi. To calculate stuff, we'll get more into that later. Right now, I'm just throwing arbitrary numbers I found that work in there, because I can't really, at this point, I think I don't think I can explain well mathematical equations. But we'll get into that definitely in the future. And we'll get our start, we got our end, and we'll set this equal to 6. And then we're going to say our variable for, I'll say, I was going to put der, but normally that would be for directory, I don't want to get confused, so we'll say direct for a direction. You could also type out direction. I try to keep my variables short, though. As long as I know what they mean, we'll say false. And that's clockwise or counterclockwise. We'll play with all these variables and you'll see them in action here in a little bit. So now that we got our variable set, before we call the arc method, the function that will draw the arc, we're going to, as always, since we're drawing something on a 2D canvas, we're going to use our context element, and we're going to say begin path. Okay, so now that we're beginning a path, let's scroll down here a little bit. So we've done nothing to draw anything on the screen, so I'm not going to update my browser yet, but we're going to start drawing a path. We're beginning a path. We're going to take our context and we're going to call the arc method from it, or for it. And once again, we're going to give it x and y position. So I'm going to say 200 by 100. Once again, these are just arbitrary numbers at this point. And then we're going to give it our variables that we already created. So we'll say radius, and then our start, and our end, and then our direction, direct. Okay, so now we've done that. It's created the arc, but it hasn't drawn it yet. So we'll just say context.stroke. Save that, refresh our browser, and look, we have a little arc going. Of course, as I said earlier, just like drawing a line, it does have other attributes such as the stroke style, which we'll set to green. So that would be the color. We'll save that. And now it's hard to see because it's such a thin line. It is green, but we will also make it thicker. So we'll say context.lineWidth, and we'll set that equal to 15. Refresh this, and now we have a nice thick green arc. Okay, so now let's play with some of these variables. So again, we got our positioning here. So if I was to move this to, we'll say 175, save it and refresh our browser here. You can see it moved to the left because this is the distance from the left of the canvas. So we've gone over 150 pixels. So obviously if I set this to zero and save it, refresh up here, you can see that it goes off the screen because the positioning is based on the center point of our arc. So not the left of it, but the center point unlike a rectangle which we would have the left of. So let's go back. What did I have before 150? Oh, sorry. That was my bad. Okay, there we go. So 150. And of course that's the left position of the center and the X position of the center, the Y, which is the up and down of the center is here. So if we want it to go a little bit lower, we would set this to 150, save it, refresh up here, and we moved it down. Okay, so now let's look at radius. And of course the radius. If you've gone through elementary school geometry at all, we can make it bigger. And of course that's pixels from the center point out. We'll put this back to 150. I just did the same thing I did before. Was 150 what we were at? Let's try. I think 75 is what I originally did. So we'll do 50 there. Actually, no, let's make it a little bit bigger. Once again, I'm just playing around here showing you the differences. Now we've got our start and our end. So let's put this to four. And so you can see this is where we're starting. So the bigger that number, the further around that will be. And this is our end, so the bigger the number we put that, it should go around that way if I remember correctly. So if we do seven, refresh, there we go. Now we also have our direction, which we have set to false. Which is whether we're going clockwise or counterclockwise, which in this case, if we change it to true, what's going to happen is it's going to flip our arc because it's drawing the same exact thing in the other direction. Let's set this to five. All right, sorry. Let's set this to three. And then we'll flip this false. There we go. So we're going basically from a start point to an end point, whether we're going clockwise or counterclockwise. So either way, when you're drawing an arc, if the arc was ever completed, it would always be a full circle. And since it would be a full circle, it's flipping it to draw the other way. Does that make sense? I don't think I explained that very well. That's why I made it smaller so you would see, because halfway it's hard to tell. It looks like it's just flipping it back and forth identically, but it's not. It's drawing the path in the other way. So it's flipping the direction, not necessarily the drawing. I hope you understand that. So real quick, let's have a look at our code altogether here. Of course, we've got inside our body our canvas element. We've got our JavaScript, which is creating some elements here. We set some variables. And I put the X and Y in here as numbers, but good practice would be to create variables for them, especially if you want to get into anything more advanced and animating, it's a little bit easier to keep track, rather than calling the arcs X and Y and then calculating and then throwing it back into the arc. You just have your variables that you constantly update, which we did do for the rest of it. And just like drawing lines and rectangles, we've got our line width and stroke style, which is the line width and the stroke style is the color. And then, of course, our context stroke is when it's actually drawn. So again, you want that at the end of that information. So I hope you're enjoying these tutorials. Once again, we're moving along, getting a little more advanced here. And I hope you're enjoying these tutorials. I know I'm having fun learning Canvas and just looking at the stuff that I'm already learning how to do, getting into 3D stuff, and being able to do most of this within my web browser on my phone. My OS is a little old on it, but it's still most of it works. Some of the 3D stuff I think I had issues with, but if you have an up-to-date browser, a modern operating system, you should be able to get pretty much all this to work. Unless you're running Internet Explorer, I think there's some issues, especially when you get into the 3D stuff. At least last I checked. I haven't tried it myself, but I know they weren't, at one point, they said they weren't going to support OpenGL in their browsers, which is just a little silly, but hopefully they do, not that I really care either way. But for them, I hope that they do. So, please visit my site, filmsbychris.com. That's Chris with the K. There should be a link in the description, and I'll see you next week as we start drawing some other fun stuff. And as always, I hope that you have a great day.