 Okay, continuing with our HTML5 canvas tutorials today. We're going to look at the very basics of loading images So I have a vim open in my text editor here as always use whatever text editor You feel comfortable with And it's the same little set we've been working with basic, you know HTML tags And we have a canvas and then some script tags where we're going to be working This is what it looks like up here Nothing because we have nothing displayed But we're going to load this image of my daughter into the canvas. That's the full size of it. There's not very big So let's go ahead and get started with that. So we're going to go into our JavaScript tags here and We're going to create some variables So as always probably can left this in from previous tutorial and save it some time, but doesn't hurt to review We're going to create a variable called canvas. This is going to point to our element in our doc you meant and We're going to get the element by ID And the ID is right there. It's my canvas This is obviously the ID can be whatever you want it to be within reason obviously avoid special character spaces that sort of stuff But it is case sensitive to itself. So since we have a capital C up here We want a capital C down there and Then we're going to end that with a semi-colon So now whenever we recall we call canvas. We're actually talking about this element up here Next we're going to get the context of that element. So we're going to save our Context we're going to call it context. You can call it whatever you'd like canvas dot get context 2d because we're still working in 2d here And then we're going to create our image object. We're going to save our and we'll call it image 1 And we'll say that it is a new image Okay So Let's see what we have so far And I'm back. I had a little interruption there, but I am back now and we're going to continue So let's review We're creating we're creating a variable we're creating a canvas which is actually just pointing to our HTML element of canvas we're getting its context 2d and we're Creating an image object saying that it's a new image. So Let's continue on here Let's see so now what we need to do is we are going to create a little Function to load the image. So I'm going to call it image We're gonna say image 1 which is our image object on load So when that's loaded, what are we going to do? We're going to run this function function Inside this function, we're going to call one command. We're just going to load the image We're going to say context so we're looking at our canvas context and we're going to say draw image So I said load image. We've already Loaded the image. Oh, we're going to in a second here and at this point. We're drawing the image. So I say draw image 1 And then we need to give it a position. This is the top left corner So right now I'm just going to say 0 comma 0. So it's top place in the top left corner And now all we have to do is one more line. We're going to say image one dot source Equals and the image I'm using is in the same folder. That's this one same folder as my scripts We'll have to do is give it its name, which is ember dot jpeg We'll save that Now also, I want you to note that you look up here. The image is 673 pixels by 897 In a future tutorial, we're going to look at cropping and resizing images But for right now, let's just up the size of our canvas to we'll say 1200 800 tall And we'll save that so it's all saved. So if I go back here and refresh we have that image So let's do this Now you've noticed that I told it to go into the top left and you'll notice there is a little white space here And there isn't if I look at the image itself And that's just due to either the padding or the margin. I always get those two mixed up of the canvas itself So that'd be something you would just in CSS. We could set the The Margin for either the body or the canvas probably the body since the canvas is inside the body Set those to zero So actually let's let's go ahead and do that. I think I think I know enough to be able to do that. Let's see I'm going to say style So this is where our CSS is going Hopefully, you know a little bit of CSS if not don't worry too much There's other tutorials out there. We'll say look at our body. So this is looking at a body object And we're going to give it parameters here. We're going to say margin colon Zero px for zero pixels That should be a zero not an O and don't forget the px I always put numbers in there like I would put zero and then go Oh, why isn't it working? And I try all these different things. I realize I forgot the px for pixels You can also do percentages and there's other options there as well But we're going to say zero because we want no I did margin again No margin or padding around our body And if I refresh this now, I think there we go. We're up in the top left corner So even though we're drawing to the top left corner of our canvas the canvas is in the body in the body Had some padding and margining so we removed that So don't get confused if you put it to zero zero and it's not in the top left of your screen It is in the top left of your canvas so now Let's look at loading another image and I'm going to do this in this tutorial just by repeating What we've already done But in a future tutorial, we're going to go over creating a function that will load So you don't have to retype everything every time basically you just call that function and load in the images So I'm just going to copy and paste for right now. I'm gonna go one two three four five six seven say seven paste that there and then I'll paste that there and So we're just gonna copy it in paste I'm gonna say create another object and really I'd organize this a little bit better if I was to do it this way But in real world scenario, I you once again use a function But we're gonna go create image to it's a image and then we're gonna say when image to is loaded We're going to load image one. We need to give it a source. Now. We're not gonna do the same image I am gonna load both to the top left corner, but I'm going to use this image Which I've used before if you just Google search tux it comes up I figure we're gonna get into some gaming stuff eventually with canvas So why not use tux dressed as Mario? So I'll paste that URL in there Come up here and refresh I Did something wrong? Oh, that's the problem. I Didn't change this When you copy and paste you got to make sure you change what you need to change because basically what I was doing there was I Renamed image one source that so it was drawing that picture for image one and nothing for image two So there we go. We have tux over top of Ember there now you might be saying you can do that with basic html and And CSS and yes, you can but once you get into more advanced stuff You're going to definitely want to know how to do this with the canvas, especially if you plan on making games You don't need canvas for some basic games and animations Obviously, you can just use CSS HTML and JavaScript with canvas I as far as I know I think that it does a better job of rendering stuff So it will use less system resources don't quote me on that But it gives you other options too because like you can actually now save this as an image You can write in your script to create a URL for this image So you can superimpose stuff and save the image where I don't as far as my knowledge goes with HTML CSS and JavaScript I could do this and make it look like this But I can't save that as an image you know, I could save the whole page as an HTML and whatever but you can actually save this as a a Png or a jpeg and possibly I'm pretty sure even upload it to a server. I Have not learned how to do that yet, but it'd be nice to be able to you know Create stuff inside here and then save it as an image. Anyway That is the basics. We'll quickly review here just for fun We're creating our canvas object in getting its context of that then we're creating our first image object and Really I think this it would make more sense to me if I put this up here But we're saying that when image one is loaded Low, you know, draw the image what image are you gonna draw? It's this one and then we're going to create image to When it's loaded load this image and of course as I said, you got the top left here So let's move our tux image over a hundred pixels and down a hundred pixels and We will refresh this so now you can see he's moved over a little bit And of course you can animate that which is what we'll get into in a later tutorial so this is the very basics of loading images into a Canvas to tour into a canvas for HTML5. I didn't want to mention in case you're unfamiliar this image of tux Seeing here is a PNG with an alpha layer and that's why the background is transparent Obviously if it's a JPEG It's going to have some sort of background because JPEGs don't support trans alpha channels Although I would not be surprised and I would probably bet money that HTML5 canvas could remove colors and kind of create an alpha channel just like you would in you know older days like if you're Ever into like editing doom or anything like that. It's kind of like a blue screen effect. We would fill in The background there, but it's always better to use alpha channels if you can and we can with PNG So why not but you probably do have that option in other cases just to mention it Anyway, I hope you enjoyed the tutorial. I hope you continue watching these HTML canvas tutorials I'm having fun making them and and next week we'll look at resizing and probably cropping images and Then from there move on to creating that function to load multiple images Then we'll do a few other basic stuff and then we'll start moving into a little more advanced stuff and start using some JavaScript Libraries or modules or wherever you call them when they're JavaScript To do some fancier things with images and text and paths and lines and all stuff We've been learning but for now, please visit my website films by Chris calm That's Chris of the K you can search my videos and playlists there or you can always just check out my YouTube channel I thank you for watching and I hope that you have a great day