 Okay. We're going to be working, again, with HTML5 Canvas. We're going to be loading some images. If you haven't already, this is part of the series. There should be an annotation up on the screen that will bring you to the playlist. If you haven't watched the entire playlist, I recommend it, but at least watch the last few on loading images. Now, on our first tutorial on loading images to the HTML5 Canvas, we did load multiple images, but we kind of did it by just doing the same thing over and over again. Today, we're going to work on creating a function that will load and draw the images for us. If you're going to be using multiple images, this is definitely a way to go. It will shorten up your code and organize a little bit better because you'll have things in lists. To get started, I've got Chrome open up here. As you can see, our page doesn't load anything just yet. Here's our code down here just to quickly review. We do have some CSS here that we added in for our Canvas image tutorials that just remove the margin and the padding of the body. That just removes any white border that's around our Canvas. You would change this to fit your project. Then we've got our Canvas element, which we've called My Canvas with a capital C, but you can call that whatever you like within reason. Then we have our scripts here. Our script, we're going to create a variable, which is going to be our Canvas. That's going to be our Canvas element. We're getting it by its ID. Again, My Canvas. Just make sure these correspond. They are case-sensitive in correlation with each other. You don't have to have the capital C there, but if you have the capital C here, then you have to have the capital C there, or whatever letters you're going to capitalize. Then we're going to take that Canvas object that we just created. We're going to set it to 2D, and we're going to set that into a variable called Context. Let's go ahead and get started here. First thing we're going to do is right now I'm going to have two images. These first two images, this one that we've been working with of my daughter, which is inside the same directory as our script, and then this one of Tuck's dressed as Mario. Let's go ahead. What we're going to do is we're going to create an array with those URLs to the images, as well as giving them names, identifiers that we can select them from. Source equals, and the first one is my daughter, Ember. We'll just call it Ember, and then colon, and then a comma. It means there's going to be another one after that. Once again, this is the one that's going to be inside the same directory, so we can just give it a local reference of Ember. Actually, I think it's JPEG. The next one is the image of Tuck's. Here we're going to grab the URL for this, which is out on the internet. I'm just going to paste it in there. Someone's going to ask at this point, how did I copy and paste that? What I did, and this is just a little side note, doesn't really have to do with this tutorial, but I do get asked that sometimes. Most of you probably know this, but I'm surprised how often people don't know this, but I believe most Unix and Unix-like systems, Linux included, has two clipboards. You have your clipboard for when you do edit copy or control C to copy something, but also once you have something highlighted, it's automatically put into a clipboard. You can paste that by center-clicking anywhere else. The center-click is basically if you have a scroll wheel, you just click that down. You don't scroll, you just push the wheel down and it will paste. That's definitely handy inside the terminal. It's also just quicker than doing anything else, because anything else, you'd have to highlight it anyway. Once it's highlighted, it's already copied. That's a little side note for you. At this point, we're going to start creating our function. I'm going to say function. We're going to get the name of load images. I also do want to give credit to the website HTML5 of Canvas Tutorials. That's where I've learned pretty much all my Canvas stuff from in my tutorials are going to be similar to theirs. I just wanted to give them credit. We're calling it load images, but we can call it whatever we want. We can name the function whatever we want. Then we're going to pass it some information and set a call back here. Then we're going to set some local variables within here. We'll say one is images. This is going to be an array, and we're just going to leave it empty. We're doing curly braces there. Then we're going to set var load did images equals 0 and var num images equals 0. I am looking at notes because I'm Canvas stuff, so I'm using notes. If it seems like I'm reading something, that's because I am. Basically, what we're doing is we're creating variables and setting them 0 because we're going to use these to count the images in just a little bit. We're going to start counting at 0 because at this point we don't have any loaded. Next, we're going to do a for loop. We're going to say for var. We're going to create a variable called src inside our sources. What is our sources? I'll go over all this again at the end, but that's passed in here. I just realized I put source there. A little typo. I would have caught that later on. Actually, just be consistent. They could all be source or all sources. It makes more sense since there's more in them for it to be sources. When we call this function, which we'll do after we create it, we're going to pass it this list of images. That's what's going in there. That's what we're looking at here. We're going to look at each one of those and get its source from that variable there. I'm not sure if that made complete sense, but again, I'll explain everything better. We'll go through some stuff here at the end. At this point, we're going to start counting our num images. Basically, when we call this function, we're going to loop through each image and we're going to get the number of images. This will get us the number two, because we're starting at zero. For each image, we're going to add one. That's what the plus-plus there means. We're adding one. This is getting us a total count of the number of images that we've passed this function. We can change the number of images within this list here. That will then allow the function here to know how many images there are. Now we're going to create another for loop. Again, we're going to do src in sources. What src is going to represent here is the name that we've given our image. The first one will be ember, the second one will be tux, so forth, and so on. That's what src represents as we loop through here. Now we're going to say images, which is our empty array that we created up here. We're going to say we want to give it the value of the name of the image. We're going to say that we're going to create a new image. Then we're going to say images. Again, src.onload. Then we're going to say equals, and we're going to run a function. If you remember from our previous tutorials on this, we have to create an image to draw into our canvas. That's what we're doing here. Then when it's loaded, we're going to run a function. We're going to draw an image to our context, which is our canvas. The way it's knowing which image, it's basically giving each image its own name based on its label down here. I give it a little identifier there. Then when that's loaded, we're going to count the number of images, see if it's greater than or equal than the number of images. Then we're going to go ahead and get its source and draw it. Let's go ahead and do that again. I'll try to explain all this again at the end a little bit better. I'll say if, and then inside here we're going to say plus plus loaded images, which at this point is zero. We're going to say greater than equal to num images, which at this point would be two because we have added to it for each loop starting at zero. For each image we've looped through and added to it. Then this is when we're going to call our callback images. Then outside our if statement here, and actually outside that function, we're going to call images src.sources. This is where we're setting its source and how we know what the source is. We're going to say src.sources.src inside the brackets there. That will grab the source from our array down here. That is our function. Hopefully I typed everything right. We'll know if we get any problems. We'll check our console for errors, but we'll say now we're going to call our function load images. That's what we called up here. Again, you can call it something else, but then when you call it, you have to call the same name that you gave it. We're going to pass it src.sources, which in this case is our list of images here. Then we're going to say function images. Inside here is where we're going to do our drawing. We're going to say context.drawimg. What image are we going to draw? It's going to be the images that are passed and then the name. Images.ember. We'll give it a position of 0 comma 0, so it'll be in the top left corner. Then we're going to say context. Let's just bring that down a little bit so we can see better. Draw.img. Again, we're going to say images, but this time dot tux comma 0 comma 0. If we save that, and if I typed everything right and we come back to our html here and I hit F5, we get nothing. That means I typed something wrong. Either I put a comma or a semi-colon in the wrong place, I forgot a bracket, or I just misspelled something like before I was doing a source instead of sources, and so they weren't correlating. How do we find out what is wrong? Well, the first place we should start is if you're in Chrome, just hit F12 and it will bring up your console, like so. If you're in Firefox, it does have some built-in console, but the Firebug console is a plugin that's also very handy. But here it's saying it's caught two errors. See right there it says, I num images. I put an I at the beginning there by accident. That was a typo on my behalf. It says it's on line 28. If we click over here, it actually brings you right to that line. But come back here into my editor and I can go to line 28. Right there. Save that. Refresh. There we go. Good thing I only made one little typo there. And of course the order it draws the images does make a difference because what's drawn second will be placed on top of the first thing that's drawn. So if we have three images, the first image drawn will be back, then the second image will be drawn on top of the first, and then the third will be drawn on top of the second. So now that we've done that, let's add in a third image. So I've already done a Google search, found this one of Tux's Rambo. I'm going to copy its URL here just by highlighting it. And I'm going to just add it to this list. I'll call it Rambo colon. And then paste it in there. Now, because we had another one need to add a comma. Each item needs comma. Each item needs commas in between them. So basically all except for the last one will have a comma after it. And then down here I'm just going to quickly to save time. Paste. So we're going to say context. Draw images. Which image are we going to draw? I'm going to draw the Rambo one based on its name right there. If I save that and then remember that I need to put a comma there. Then save it again. Come back here. I'll hit F5 to refresh. Oh, sorry. Go to our page and hit F5 to refresh. It drew that. And again, since it was drawn last, it's drawn on top of the other Tux. You can kind of see the other Tux a little bit behind him. Let's give him another position. We'll move him 400 and 200. Save that and we'll refresh. And you can see he's been moved over 400 pixels and down 200. We can also move this Tux. We'll move him over 100 and down 200 so he'll be on the same plane as that guy. So it looks like they're standing next to each other. So let's quickly review all this code. So again, we have our canvas. We create our canvas element inside our script here. Now we have our function and we have our source list and then our load images when we're calling the function. So let's start here. Again, we have a list of our images and we're going to do with that list what we're going to call our function which is up here but we're calling it here. We're putting in this list. It's going to run that function and then retrieve some output with images there. So let's go see what it's doing up here. We're saying we're going to pass it that source list. It's called sources. Again, an empty array. Two variables set as zero to count stuff. Now that we have num images set to zero for each image we're going to loop and add one. So in this case there's three images we're going from zero one, two, three. So we know there are three images. Then we're going to loop through each image again at this point and we're going to say images. Which image we're going to pass it? Well, this one's ember and then tux and then Rambo. And we're going to create a new image based on that. So basically each image will have its own name. One will be images ember, images tux, images Rambo. Then we're going to say well we're going to load that image and run this function. And it's going to check what is the loaded images, the number of images loaded equal to or greater than the num images. If it is equal to or greater than, then we're going to do our call back passing in the images. And then what we're going to do outside of that is, so if that's basically saying at this point we're done go back to down here and draw the image. Now before it's done, if we haven't loaded all the images we have to say okay, well that image that we just put in, let's give it a source. So sources is going to be basically look at each image and look at its URL here. So it's going to loop three times and then on the fourth loop it should say oh, we have now loaded all the images. Let's do the call back come back down here, pass it images. So now those images, which image and it will just draw each one. And again here we're just giving it positions. Now of course I always recommend typing out code by hand when you're learning, really all the time because it always just gets you better at what you're doing. But I will post this in my Pastebin account. If you go to pastebin.com and my username is metalx1000 you will be able to find this. You can also go to filmsbychrist.com. That's Chris of the K. There's a link in the description. That's my site. There should be a link somewhere that says scripts. Right now it's in the top toolbar. But my site might change in the future. And that will bring you straight to here when you click on that. And you can see all the scripts that I've uploaded. And we have a list of all the HTML ones here that we've gone through already. And of course this one will be there. It will be named like multiple images HTML5 or something like that. And you can always copy and paste it to test it. But I recommend to actually type it out when you're learning. But this image of my daughter is not going to be in that script since it's an image on my local machine. So just so I don't confuse you guys I'm going to remove it from the list. But this code just as it is will go up on the page. So if I run it again now that I've removed those two lines for that image and hit F5 you can see it still runs. It just doesn't place the image because it no longer exists. So if you're just doing a thing with one or two images, writing out this function might be a little more typing but definitely keeps things more organized. And really once you have more than three photos this is going to start shortening your code. You can have like a hundred photos in here. And all you have to do is add them to the list and then add them to your little draw function here. So that's it. I hope you're enjoying these tutorials. Now that we've done some loading images and a few more tutorials on the basics of HTML5 canvas then we'll move on to advanced stuff and then we'll start moving into other tools for 2D stuff and then eventually 3D stuff. And hopefully by the time I get to those tutorials I'm a little more knowledgeable on the 3D stuff because I've played around with it a little bit and I'm so happy with what I've learned so far and I think we're going to do a lot of fun things. And again because we're doing it in HTML5 and pretty much all modern operating systems can run HTML5 and most modern browsers are at least catching up because it's not the standard yet but it will be HTML5, not that everyone follows the standard, but we'll learn how to create things that will run on pretty much any device phone, tablet, Android, iPhone, Windows 8, mobile, Linux FreeBSD, any modern operating system will be able to run what we are creating, at least in theory. So I hope you're enjoying these tutorials, I'm enjoying making them, I'm enjoying learning. Visit FilmsByChris.com, that's Chris of the K, there should be a link in the description and I hope that you have a great day.