 Okay, we're starting a series on HTML5 and Canvas now, I just want to state that The canvas is something that's really interested me for a while And I'm actually still learning myself So I'm gonna do my best to teach you guys as I always do But if I say something in proper you can let me know in the comments below But don't be so mean about it But I'm gonna do my best to explain stuff properly and as best I can Also, I want to mention that I have found a website called HTML5 canvas tutorials calm to be Very good at explaining Canvas and having a very interactive little interface and a majority of my tutorials are going to be very similar to their tutorials because that's where I learned So let's go ahead and get started I Have my terminal down here. I'm going to use Vim as my text editor, but as always use whatever text editor that you prefer for writing code Also, I'm going to be using epiphany in most of these tutorials epiphany browser It doesn't really matter. It's not my main browser normally. I use chrome and sometimes firefox But the reason I'm using epiphany as I have in past web tutorials is that it will automatically detect when I save my file and Automatically update. I don't have to go refresh the page. I think that's kind of nice, especially when I'm doing tutorials So anyway, I already have pointed out a file, which is this file right here called line basic dot html So I'm going to open that with the Vim And you can see that it's a very very basic html file that doesn't explain anything display anything yet We have a little Tag up here, which is something I pretty much never remember to do. It's proper to do it most time You're okay not doing it Most of my videos I haven't put that there and I'm surprised more people haven't yelled at me about it But it's just saying the doc type is an html and you technically should have that even though It's not really a requirement in most cases Then I got my html tags header tags and body tags and what we're doing today is pretty much going to be all in the body tag So let me go ahead and start editing here First thing we're going to do is we're going to create our canvas element. So I'm going to create a tag I'm going to type in canvas. Oops That's all types are wrong Okay canvas I'll give it an ID ID equals my canvas And I'll give it a width of We'll say 600 and we'll give it a height of We'll say 300 and we will close our canvas tag So now I can save that This up here will automatically update you don't see anything yet because we haven't drawn anything to the canvas just yet So now I'm going to start writing some JavaScript I'm normally put JavaScript in the header Thing is you do need the canvas and everything to load Before the script runs In most cases what you could put it in the header tag and and have it wait or have it activate with a button click But most of these tutorials I've seen put it in the body afterwards I've heard different arguments on different things for these tutorials for right now I'm going to put the JavaScript in line in the body here. So I'm just going to say script and I will close my script tag and Now we're going to create a couple of variables here We're going to say Var we're going to say canvas and the canvas is going to be Document Dot get Element by ID and of course if you look above we called it My canvas So we're saying look Our canvas their variable here is going to equals this it's going anytime we call Canvas it's actually going to be looking at this object up here Okay Next we're going to create another variable here And I'm going to call it context And once again most HTML5 campus tutorials I've seen call it context But you don't have to call it context you can call it my canvas or something else if you want But we're going to say that is our canvas. So our canvas element and we're going to say get the context of That element and in this case we're going to set that to 2d because we're going to be drawing 2d stuff. We're going to be drawing lines in this tutorial Although in the coming weeks we will eventually get to 3d stuff That's way down the line got to learn the basics first. So now we're going to say context So that's our our canvas context here And we're going to say we're going to draw on it and we're going to begin a path Which is a line in this case So we're going to say begin Path see make sense right now. We're going to take our context It's kind of like our paintbrush It's where we're going to start drawing from so we're going to move it to and we're going to give it a position and I'll say 200 by 300 sure no, let's go 200 by 30 next what we're going to do is we're going to say context again and In these simple tutorials think of context once again as like a paintbrush and now we're going to say line 2 and we're going to give it another position. So we'll say 250 comma 50 So what we're saying here is Think of our once again our context as our paintbrush We're going to move it someplace so we're going to move it 200 pixels by 30 and then we're going to from that point draw a line to 250 and 250 but we need to give it a little more information before we actually draw that and Well actually no, we don't We will in a minute. We're going to add stuff to this. We're going to say context dot stroke So this is when it's actually going to draw the lines So once again, we're going to begin a path We're going to start that path at to 200 by 30 and then we're going to move to 250 by 50 and then we're going to draw that line that we just created So if I save this give it a second. It should update in my browser. We get absolutely nothing I must have typed something in here wrong Let's see Things looking right Context context There we go and Now that I think about I'm probably not going to use epiphany in the future because I really like Google's debugger and I probably could found that a little bit faster with that But let's save that up and you can see up here. We drew a line. So basically we went Over 200 pixels down 30 and then we drew a line to 250 pixels over and 50 pixels down. Let's go ahead and change that a little bit. We're going to say Instead of 200 over. Let's go 100 pixels over to start. We'll save that and You can see now instead of starting at 200 we started at a hundred over went 30 down and then we went 250 over and 50 down Now let me show you something here. We're going to set this to 50 And you can see now we're going back the other way So I wanted to point that out that we're not going 250 pixels over from the point we're at we're going to 250 pixels as Where it is located in our grid all together. It's a Absolute position rather than relative So now there's other options you can give the line. So we drew a line big deal. Okay Not that we're going to get much fancier in this tutorial what we're going to do here is we're going to say context And we're going to give it some other attributes and this time we're going to say line with and We'll say line with equals 50 or 15 I mean Save that and now you can see our line is thicker. Let's go ahead and change this back to 250 so we have a bit longer a line So there we go. So that is our line with we can go 10 you see it's a little bit thinner or we can go 50 And now we're gonna have a big old fat line. Okay, let's go ahead and put it back to 15 I think that was a good number and now Each time by default we are drawing a black line. Let's give it some color So we're going to say here context and we're gonna say stroke style And we're gonna say that equals and in here we can give it a color So I'm just gonna type in red save that give it a second to update and boom. We've got a red line We can do blue as well We can also go I think this will work light blue and now we got a light blue. We can also do Green or let's light green and Green like so so a bunch of different colors. You can also use, you know, your Hex codes for HTML color. I'm not sure I'm using the right terms there But yeah, you should know what I mean like instead of typing red you could do pound FF 0000 and It should be oh, it's it's black. What did I do wrong one not enough zeros? Boom there we go. We could also, you know changes to a five. I'm not really sure what color this is gonna end up being but It's a little bit lighter Let's go Change this to what a G work there. I think it should Nope that just and it's a black. I don't think that's right. Let's try a Making up stuff here. Okay. There we go. Kind of got a brownish color. Okay So we went over drawing a line the line width and the color of the line Let's go ahead and do one more thing and that will be our line and caps so We're gonna say context dot Line cap and once again, you have to put these things before you draw the line and when you say context stroke That's when you're drawing the line So we're gonna say line cap and we're gonna say equals and there's three different options There's but round and square By default it's but which is what we have right now So if I type in but here save it, we're not gonna see any difference in the HTML up in the browser We can do round Which gives us nice rounded edges and We can also do square which is pretty similar to but it just extends the line a little bit longer So if we put this back to but and if you watch it will look the same just shorter So I'm not really I haven't really read up on what the differences are But basically I think of it as square and round but the default so Maybe some comment below or maybe I could look it up myself So that's it for this tutorial. Let's quickly review and actually let's actually add a second line So since we began drawing a line here and Then we drew it here we can begin drawing another line after that still using the same context So I'm just going to quickly copy paste Our information here, and I'll just change its position. So I'll say 50 there and I'll change this to 50 and we'll change this to Blue so that you can see We'll save that let it run and there we go. We have another line. Let me make this a Little bit longer actually. Let's go 150 here Because I want the lines to overlap a little bit and we'll make this 150 as well So now our lines are overlapping. No, they're not I'm an idiot Let's make this 250 sorry got my X and Y mix mixed up there So you can see that The lines are drawn just as if you were drawing on a piece of paper the secondary lines will be drawn on top So the first line we drew which is this brownish line when we drew another line The second line gets drawn on top since it was drawn after the first line So that is it for this tutorial on basic lines, let's Once again make this full screen. We're going to go look our HTML tags. We created a canvas We gave it an ID. We gave it a width and height then we started our JavaScript down here Once again, that's just so that we'll run after the canvas is created if we wanted to we could Have it happen after you click a button in which case you could put it up in the header Once again, different people have different preferences Then we're creating a variable here called canvas which is actually just pointing to our canvas object because we're looking at our Document which is our page itself our HTML. It's doc type. This is our document So it's looking at that and it's finding an element with the ID of my canvas in this case up there But it doesn't have to be my canvas. It could be whatever you want to call it But it is case sensitive So if I did capital M and the capital C here as I did we have to type a capital M and a capital C here as well But now every time we call canvas we're going to be looking at this object or this element And then we're going to look at that element and get its context which is 2d here And we're going to put that in the context that just saves us from typing all that out every time And now we can use our context to begin a path Where we want to start drawing to so we're going to move to a certain position X and Y there then we're going to draw a line or move it to Create a line to another position. We can set its width We can set stroke style. We can set its line caps and then when you say stroke is when it's drawn Do remember that this is all case sensitive So you want a capital C there capital S there capital W there capital T is here and here But that's it. That's drawing a line in canvas. I know it seems very simple drawing a line, you know But you do a lot of cool stuff as you will see in the coming weeks and months as we get more in depth in this We get into stuff with with physics and 3d stuff It will get pretty cool. So and actually before we even get to that stuff, we'll do some cool stuff So I thank you for watching. Please visit filmsbychris.com. That's Chris with the K There should be a link in the description And I hope that you have a great day