 Okay, continuing our tutorials with HTML5 Canvas. I'm really enjoying this. I always want to mention at the beginning of my videos, first off this is a series. There should be an annotation on the screen to the playlist before you be sure you start at the beginning of the playlist or you might be a little lost because I'm going to assume that you've watched them. The other thing I want to mention is that I am learning HTML Canvas as I'm making these videos. I'm learning something and then I'm teaching a video on it. Hopefully I'm teaching everything properly. I believe I am. I believe I've done a pretty decent job so far. I think I'm grasping the concept. What's helped me grasp the concept is a website and I want to mention they did not pay me. I have no association with this website. It's just I found this to be a very good website plus my tutorials that I'm doing are very similar to theirs since I learned from their videos, not their videos but from their tutorials. It's html5canvasutorials.com and you can add the code right on the page making it very easy, simple to learn. I have tried other pages and I feel that I did not learn as well. I was a little more confused but they make it very simple to understand. Anyway, today we're going to be looking at paths. Paths are pretty much what we've drawn so far. Paths, arcs and curves both quadratic and bezier. You can connect different paths into one path to make more complex shapes and so let's go ahead and jump right in and we'll have a look at this. So I'm going to say context dot, if I could type today, begin path and then we're going to so begin the path which is what we've always done because all those elements have been paths. We're going to move to a certain position and that position I'll say 100 by 50 just making up a point on there. So we're going over 100 and down 50 pixels on the canvas. Now we're going to say context dot line 2 and we're going to draw a line from that position to another position I'll say 200 and I'll say 100. Now we also need to let's give the line a width. So context line width this will be the thickness of the line we'll say 15. Next we'll draw it we'll say context dot stroke and if you come up here into my browser chrome I'm going to refresh and you can see the line we just drew. Now I can take that line and copy and paste it just to save some time. I'm going to say we're going to go down 300 but I'm going to leave that other one as a 100. I'm going to refresh it so we went down and we didn't go down anymore we went over another 100 pixels so we can do that again and as long as these line 2's that we're drawing are before the stroke they're all going to be considered one path because they're within the begin path there if you did after you would see it because it wouldn't get stroked that did not sound good we're going to say 150 and we'll set this to 120 save that and you can see we went back that way let's actually go 350 go that way. Now as I said arcs and curves are also considered paths so we can put those in here as well so we did was we moved to this position and then we drew a line from this position and then from this position we drew a line to this position and then from this position we drew a line to this position so now we're going to draw an arc I'm sorry a curve and we'll start the curve at this position since that's the last position that our I'll say our paintbrush was at and what we can say is context dot we'll go with a Bezier curve no let's do a quadratic quad quad no are there drastic if I type everything right this should work curve to and we got to give it four numbers for two different positions because we already have the beginning of the curve listed here so we need the center control point and the end point so I am going to say I'm thinking trying to think I guess I'll just whatever yeah I'll say 150 comma 10 comma and then we'll say 100 comma save that okay boom there we go we drew an arc like that so we went here to here to here to there and then arced back to there we can also go let's put that at 100 see what that does I think I was going to give us more of a straighter line yeah so it's not as arced I wonder I haven't tried this so this may not work because normally when I try stuff in videos I haven't tried yet it don't work can I put a negative number in there and have the arc no it just goes up that way interesting I'm sure someone will comment on that um so once again we drew a line from here to here to here to here and then arced this way and of course we can give these this path a different color so we can say stroke style equals we'll say red and I did the same thing I did in another tutorial forgot the r in stroke it's nice when you make the same mistakes over and over again because they're easy to figure out now I'm going to try something else I actually haven't tried I just thought of so we have our begin path here and of course we can begin a different path after we stroke after we draw the line with stroke um yeah saying stroke this just was going to sound wrong um I think and I have not tried this I want to try something here I want to draw another line let's let's move this line put it down here after the stroke and I'm going to say here uh context dot stroke style once again I am learning myself so I could be way off on this but I just had a thought that if I continue the path and stroke it stroke it again I wish they didn't use that word even though it makes sense um if I call the stroke method again uh without creating a new path if nope nope it rewrote over the whole thing I thought maybe you could make a different portion of the same path a different color and there might be a way I thought that would work it didn't um so anyway as you can see all the different uh the paths that we've been creating can all be connected in different ways uh so I'm just going to leave that like this hope I remove the the width and that does why would that be let's move this oops let's move this back up here and once again context dot line width equals 15 save that boom okay a little sloppy of a shape but you get the idea I hope and uh I hope that you enjoyed the tutorial uh once again I'll be posting all these scripts on my pastebin account over at pastebin.com my username is is medilex1000 but I should have a link on my website my website is filmsbychris.com that's chris with the K there should be a link to that in the description I hope you're enjoying the tutorials once again I hope you're looking forward to where we're going with this and uh if you are please uh give thumbs up and comment below let me know that you're liking them because I'm I'm already working on more so I hope you do because there's more coming either way uh and as always I hope that you have a great day