 Okay, continuing with our HTML Canvas tutorials, and we are HTML5, that is, Canvas tutorials, and we've been drawing lines and paths and rectangles and stuff like that, and today we're going to look at, we looked at how to connect these different paths as, so they can be one long path, if you'd like. But there's different types of line joints that you can join them as, and whether you want a sharp, rounded, or flat joint, you've got those three different options. So as always, I've got my web browser up here, I'm using Chrome for most of these tutorials, and I'm going to use Vim as my text editor, always feel free to use whatever text editor you prefer, and let's go ahead and get started. I have the basic HTML code here, started our JavaScript inline down here, once again and this is part of a series, if you haven't watched the rest of the series, there should be an annotation on the screen leading to the playlist, I recommend you watch all the videos in the playlist, because you might be a little lost if not, but if you're fairly versed with Canvas and you're just looking for one or two things, I guess it's okay if you jump ahead. Anyway, let's go here, let's type in, let's take our context and we will say dot begin path, and then we will move to a location, so this is all similar stuff to what we've done in other tutorials so far, move to, I'll say 100 and I'll say 125 there, and context dot, and we'll say draw line 2, and remember this is case sensitive, and we'll draw line 2, 150, and we'll say 75, and then we'll say context dot stroke, so we've drawn one simple line here, if we refresh up here, we get our line right there, let's go ahead and give this line context dot line width equals we'll say 15, once again finish saving that, and then refresh up there, we have one line here, so we're going to draw another line coming out of that line, so we just need to add another context line 2, and we will draw a line to 200 and we'll say 125 for there, so refresh up there, and as you can see we have kind of a sharp little angle there, and that's default, that's one of the three different styles of line joints or joining lines, that's a mitter, and then we also have round and beveled, so we didn't put anything in here for the type of line joint, so it defaulted to that, but if you wanted to specify, we can say context dot line join, and we can say equals mitter, and again doing that isn't going to change at all because that's the default anyway, let's go ahead and give it another option here, we'll say round, save that, and there we go, now you can see it's rounded, so let's just comment out this line, mitter, we get the point there, let's increase the size there, and if we put it back to round, we get rounded, and then we have a third option which is bevel, so we'll change this to bevel, and when I refresh up here you'll see it now goes flat, so bevel is kind of flat, round is rounded, and mitter, which is the default is the pointy joint, so that is creating a line joint, and then I hope that you enjoyed this tutorial, it was kind of simple kind of review, really the only thing we didn't really add much or really anything, we added line joint, which is something I could have shown you in a previous tutorial, but taking things one step at a time, and as always I hope that you enjoyed this tutorial, I hope you visit my site filmsbychris.com, that's Chris with a K, there should be a link in the description, and I guess that was pretty quick, so I'll just once again review everything, we have our canvas element up here, we're creating a variable that's looking at that element based on it's ID, then we're looking at the context of that, and we're setting it to 2D, and for right now just in your mind for these simple tutorials, think of the context kind of like a paint brush, so we're going to move the paint brush to a certain, alright we're going to say we're going to draw a path, and then we're going to say how thick it is, and then we're going to move that paint brush to a certain place on the page, and that's where we're going to start drawing, and then from this point we're going to draw a line to this point, and then we're going to draw another line to this point, continuing the same little path, and we're saying how they're joined, so actually let's add in another line here, we'll say let's go 150 here, and 250 there, or 225 there, refresh that, and then there we have another line there, and then we can always go back to our starting point if we want, by either, oops, putting this back to there, should get us back, gets a little diamond shaped here, you notice it isn't linked up properly there, so if you remember a previous tutorial I showed you how to close objects, I closed these paths, and that would be simply, I think we can even completely get rid of this line here, and I will then put in a context.close path should work if I'm not mistaken, once again I'm new to canvas myself, so instead of drawing a line from here to there, we just say close and it'll actually close our object, and of course we can always also fill the object, so I can say context.fillStyle, just to review stuff from previous tutorials, we'll say blue, and they'll say context.fill, so the fill style is setting what color we're going to fill it with, and the fill method here is actually going to do the filling, so if we refresh we now have our little diamond shape, and of course we can change these bevels to round if we want, and now we have a nice little rounded object there, so yeah add a little bit more to this tutorial, well it's all review, but putting things we've learned together, and then also adding in that line joint option, so I thank you for watching, I hope you enjoyed this tutorial, as I said earlier please visit my site filmsbychrist.com that's Chris at the K, check out the link in the description, and I hope that you have a great day!