 Okay. As always, this is part of a series. There should be an annotation somewhere on the screen to the playlist. I recommend watching the playlist from the beginning so that you don't get lost. Also, as I mentioned in an earlier video, I myself am learning HTML5 Canvas. And I'm also making these videos teaching you. It is an uncommon for me to do videos on stuff that I am learning. It helps me learn. I also think that even though sometimes my explanations may not be 100% accurate, maybe they make more sense to someone else who's learning. But I try to be as accurate as possible. And today we're going to be going over curves. They're simple to do, but I don't know if I grasp the way they're drawn 100% to explain it well or properly. So forgive me if this is not one of my better tutorials. But there's two types of curves that we're going to draw today. A quadratic curve and then a bezier curve, I think is how you say it. Sounds a little French. I don't know if that's French. If anyone knows, if it's French, let me know. So let's go ahead and get started. Let's see if I can get my window not to see if it get finishes shaking here. Okay, so I already have, I'm going to use Vim as my text editor as always. That's what I prefer. I like it. It's lightweight, does, you know, syntax highlighting for color coding. So that's all I need. Use whatever text editor you prefer for writing your code. And I've already created the basic HTML file for our quadratic, will you stop shaking? Sorry, sometimes comp is acts up when you have the wobbly windows enabled. Okay. And we have our basic HTML document here. HTML tags, header tags, body tags within our body. We have our canvas elements here. Then we have our JavaScript here in line. Cause once again, the code has to be called after the canvas is drawn. You can also do this in the header. Some people prefer it one way or another. I'm doing it this way just cause that's how I learned working with the canvas in the future. I may put it in the header depending on whether I'm going to be calling it immediately or clicking buttons. It could be in either place for either way, but yeah, different people have different opinions on how to do that, whatever you prefer. So once again, we're gonna be working with a quadratic curve here initially. And basically, I don't even know really how to explain the difference between the two curves other than there's context points and then there's midpoints. And it seems like the other curves have more midpoints. I could be wrong on that. Let's just get drawing and maybe you'll just understand from watching. So we have our context element here. It's a 2D canvas. And as always, we're going to context dot begin path. We've called that method that function and now we can start context dot move two. Remember when we were drawing lines, this is where we're gonna start drawing. We're gonna give it an X and Y coordinates. It's basically the left and top of the first point of where we're gonna draw. And we'll say 188 to 150. So that's, if I remember correctly, that's 188 pixels over and 150 pixels down. I hope I said that right. And also I do like to give credit. This tutorial and most of my tutorials are gonna be very similar to the ones on html5canvasutorials.com. That's where I learned. I'm not getting any kickbacks from them. That's just, I learned from there. My tutorials are gonna be very similar to theirs. I don't want someone going, oh, you stole this from their website. No, I took notes and my notes are based on what they taught on that site. You know, I changed things slightly to make it better for me to understand. But yeah, that's where I learned. So my stuff's gonna be very similar to theirs. Context, dots. Okay, so this is where we're gonna call our method for the quad, let me look at the notes, make sure I spell things right. Quadratic, curve, case sensitive, capital C there. Two, so we have our starting point, our move two point. So that's where we're starting at 188 by 150. And now we're gonna draw a curve and we're going to draw it from two, 88, or two, two, 88, zero, and three, 88, 150. Okay, so we did that. Let's give it a width. So just like other lines and elements we've drawn on here, we can give it a line width, set that equal to, we'll say 15, and we'll also give it a color. We'll say context, dot, stroke, style equals, and we'll say blue again. I just, I like blue. I also really like black, but that seems kind of plain if I, since that's the default, you know? Stroke, which means draw it. Let's go ahead, save that, refresh our browser up there. So there is our little quadratic curve. So let's start playing with these numbers. Obviously the 188 and the 150 is where we're starting at, which is right here. So we can say 150, and this will move it to the left a little bit. There we go. And of course this is the up and down. So if I move this to 110, it's gonna move that starting point up a little bit. Okay? Let's put those back where they were for the time being, and let's change some of these numbers and see what we get. So that is the positioning of our center point, I believe, which is at the very top here. It's the center point of our curve. It's a control point. If I said center point earlier, I meant control point. So if I was to move this to 150, which is further to the left than our initial starting point, we're gonna get this should be stretched over here. So let's refresh this. There we go. Now let's put that back to where we were before. So we got our nice little curve there. Let's change our zero to 10. See what we go up. I did that in another tutorial too. That's because I'm hitting the numbers while not in edit mode. Okay. So that lowered our position there. So let's put that to 100 and see what we get. We get a very low curve there. And let's put it back to zero now. And let's change this to 488. So that is our ending position there. And if we change this to 50, that should move that up. So what we've got here is, we've got our starting position left and right. We've got our ending position left and right. We've got our left and right, our X for our center point and our coordinates for up and down of the center point. So starting point, center control point and ending point. That's what we've got with our curves here. And we should also be able to do a context dot line cap equals, I like around, it looks nice. So now if we refresh this, you can see we got nice little round caps there. So we have now drawn a curve. And I hope changing each number showed you, starting point, left and right, center control point, sorry, not left and right, left and right, up and down. Center control point, we got, it's left and right, up and down. And then we've got our ending point, left and right, up and down, or X and Y. So that is a quadratic curve. Let's go ahead and save that. Let's go into now our B-A-Z-R curve, B-Z-R. And here we have got a different type of curve. It's going to be similar. Now B-A-Z-R curve is, everything's going to be almost identical. In fact, I probably should have copied and pasted the code in here to save us some time, but it doesn't hurt to go over it again. It's almost the same as a quadratic curve, except for you're going to have more control points. So we're going to give it more information here when we actually call that method. So we're going to say context dot begin path, just as we always do with our 2D drawings like this, we're going to say context dot move to 200 and 150 will be our starting point. And then we'll say context dot B-Z-R curve with a capital C to capital T. So we're calling this method, B-Z-R curve two, and we've got to give it a couple of points here. So we're going to say 150, we'll say 0, 300, 0, 300, and 200. And we'll give it the context A line width of, we'll do 15, since that seems to be what I always do, I think that's a good size. We'll say context dot stroke style equals and we'll say red in this case. And then we'll say context dot stroke. And up here, if I refresh, there is our B-Z-R curve. So let's go ahead, once again, this is the starting position, this is that point, and this should be our ending position here, that point. But we give it some control points in the middle here and let's play with them. Let's set that one to 50, save it refresh. So you can see we moved that point over there. We can also move it's a y-axis. We'll put this to 15 here, save that and refresh up. You know, I never do that in tutorials and I've done that in I think three of the tutorials in this series, that's because I'm trying to type too fast. Okay, so let's set this to back to 10 and we can see the movement here, refresh. So very little movement there. Let's make it extreme and make it 100, boom. Okay, so we moved that point down quite a bit. Let's move this one to 200, see where it goes. So we move that over, let's make it bigger and go 500, boom. And we'll move this endpoint to 800, no, let's not go 800. Our canvas is only 600 width. Let's go 50, why do I see, I keep on starting to type numbers, just undo, there we go. Yeah, it's at this point someone's going, gee, it's because you used Vim. And yeah, I'm typing stuff wrong, but could happen in any editor. So there we made a little knot there. So let's move that back to, let's say, 350, boom. And of course we've got our 200 here, let's move that to 20, see the difference, boom, all the way up there. So let's see how many times I can say boom, boom. Okay, so we have our starting point and then we have a control point here, our control point there and our little ending point there. So the Bezier curve have two control points, control point one and control point two, giving you a little more flexibility. But you can connect all these path objects, the curves, the lines, both the arcs, the Bezier curves, the quadratic curves. That's something we're gonna get to in a future tutorial, connecting all these and making more complex shapes with them. So that's it for this tutorial. I thank you for watching. I hope you enjoy it. I hope you're enjoying the serial once the serial series. I hope that if you do enjoy these and you're looking forward to the more advanced stuff and you're also enjoying these basics, let me know in the comments below, give me thumbs up. I still have a lot of these videos to come once again getting more and more advanced on what we do. As always, I wanna say, the HTML5, I think is a great thing, especially the canvas, and it really eliminates the need for flash. There were some things that we were kind of restricted. A lot of things we could do with JavaScript before that we could use to replace some flash stuff, there was a lot of stuff, video and audio stuff, but especially the canvas stuff that we couldn't really do before, especially with 3D stuff, unless you had flash in the browser. And of course, we all know flash is horrible. And anytime you can have your browser do something rather than have a plug-in do it, all the better. So, I'm Lovin' HTML5 Canvas, I'm learning a lot and I'm really looking forward to doing some cool stuff with the 3D elements in the near future. So keep on watching, keep on enjoying, be sure to like, subscribe, all that fun stuff I'm supposed to say to get you to keep watching and I hope that you do and I hope that you have a great day. I'm Lovin' HTML5 Canvas.