 Okay, continuing with our HTML5 canvas tutorials here. Once again, as I keep mentioning in these videos, this is part of a series. There should be a playlist. There should be an annotation on the screen to a playlist. If you haven't watched the earlier videos, you may wanna check them out, because as you can see, we already have some code written out. Let's quickly review the code that is here. In the last tutorial, we added some styling tags to remove the margin for the, and the padding, to remove the white border around our body. That way our canvas is in the top left corner. Obviously, you may not want it in the top left corner, but that's what I was going for in the tutorial. So we're setting the margin and the padding for the zero pixels, making sure that the body, which is where the canvas element is, is in the top left corner all the way. We also have our canvas element right here. It has an ID of my canvas with a capital C. It doesn't have to be that. You can call it whatever you'd like within reason. But remember, it is case sensitive in the fact that when you use it elsewhere, like here, it has to match whatever you put there. I also gave it a pretty decent size of 1200 by 800 pixels, so 1200 wide by 800 tall. And then we start our JavaScript here. In our script here, we're creating a variable, which is looking at our canvas element. And then we're getting the context of that, and we're making sure it's 2D. We're setting it to 2D because we're working with 2D here. And then we're going to create a image object. It is a new image. So we're just calling that function there to create an object, an image object. Now we're saying when the image is loaded, we're gonna run this function, which right now only has one command. And that command is to get the context of our canvas and draw to it where we're gonna draw to it. We're gonna draw an image that we've created here. And we're gonna draw it in the top left because we're going zero pixels by zero pixels. What image is it gonna draw? Well, we're setting the image that we've created. It's source to image of my daughter. It's in the current directory, same directory as our HTML code here. So we don't have to put the full URL. We just have a relative one of ember.jpg. And what does that give us? That gives us this here. So that's a review of last time. Well, at the end of last time, we ended up doing two images. Well, now we're just gonna work with one and we're gonna work on resizing. As I said, right here, when we draw the image to our canvas, we're drawing this image at zero pixels by zero pixels. So you can once again move that around if you don't want it in the top left. But if we do some more commas here, we can say comma 200 comma 300. And that will resize the image to 200 pixels by 300 pixels, which is going to distort our image because if you look at our original here, oops, it is a 637 by 897 ratio there. So it's gonna be a little distorted in this case, but we'll save that refresh up here. And there's the image, not too distorted because the percentages aren't too far off. But if I set this to, we'll say 500 and we reload, you can see that I've now stretched out the width to 500. And of course we can continue moving that up. We can say 800 and really start stretching it out. And we can also shrink this one down, squish it up a little bit more like so. So that's resizing an image. Obviously you could also do percentages of the entire canvas or the image itself. We'll get into that in a little bit. We're actually gonna be looking at some, taking the canvas width and height and working with that now. Resizing is easy. We're gonna get into cropping here, which gets a little more complex if you want to make sure you don't distort your picture and crop it properly. And really it's just adding more values into this draw function here. But instead of just writing those numbers in there, we're going to actually create some variables. And that makes it easier for later on if you want to change them plus, we're gonna be calculating a few things here. So let's go ahead and let's put this actually inside our function here. We're gonna say, we're gonna create a variable. We'll call it source and we'll set our source, sorry, source X to, we'll just say 100 for now. We'll set our source Y equal to zero. And we're gonna play with these numbers in a little bit so you can see what they do, but let's just create the variables for now. And once again, we're creating these variables and we're giving them names, but these names don't have to be, this doesn't have to be source X or source Y or source W. That's what we're calling them. So do what's relative to your project. So here we're gonna create source width, variable. Then we're gonna say source H for height. We'll say 150 for that. We're gonna once again be changing a lot of these soon. Let's go ahead and make this full screen for right now. And next we're gonna create a variable called test W. For destination width. And instead of just putting a number in here, we're going to set it equal to our source W. This will help prevent distortion. Obviously if you want to distort the image aspect and ratio, you wouldn't set them equal, but if you don't want it to store it, these two are going to be the same. So we're gonna set them the same. And this is why using variables, one of the reasons using variables is handy rather than typing the same number in multiple times. And if you change one, you gotta change the other. And if you miss it someplace, it's just gonna cause problems. So same for the destination height, we wanna set it equal to the source height. So we're not distorting the image at all. We're gonna say a variable and we'll say destination X. Then we're gonna say that is going to be the canvas.width. So what this is saying is, look at the canvas and whatever the width it is. In this case, it's 1200 pixels. And what we're gonna do is we're going to divide that by two for now. So we're going to get the center and then we're going to subtract destination width. What this is doing is basically going to be centering our image on our canvas. And we're actually gonna play with that in a little bit here. But basically if we were to, if you've done any type of programming before where you're working with images or anything visual, you know that to center something, you'd only have to get whatever your canvas or whatever you're drawing on width and divide it by half to move to center point. If we want the X, we need to also find that objects width and divide it by half. Otherwise, the left side of the object is gonna be at the center, not the center of our object. Hopefully that makes sense to you. Like once again, if you've done anything visual like this before, you do understand it. If not, hopefully I'll explain it better here momentarily or at least demonstrate it a little bit better. So we're gonna go height, divide by two. Sorry, canvas height divide by two. And we're gonna subtract our destination and I put destination width there. I'm gonna put destination W and H just trying to shorten things up. I like to have my variable short divide that by two. Okay, so now that we have all our variables, let's input them into our function here. So we still, we're gonna have zero, zero. Well, no, we're not gonna have zero, zero. We're going to have 100 and zero. So we're gonna have source X comma by source Y. Once again, the case does have to correspond since we have a capital Y and a capital X there. We have to have capital Y and capital W down here. Or you know what I'm saying. Same thing, H. Then we're going to go and just give me a moment and I'll explain all this. Actually want that to be our X and this to be our Y. And then we're going to go our, yes, W, that was correct. And our H, if I remember correctly. So before we explain it, let's just look at it. We'll come up here. We'll refresh this page now. And you can see that we now have cropped our image and centered it. So real quick, just to give you a better visual of it, I'm in Chrome here. I'm gonna hit F12 to bring up our little console here. I'm gonna click on the magnifying glass here. Now I hover over objects. You'll be able to see them better. So you can see that our image is not only cropped, but centered directly in our canvas here. And once again, we, let's turn that off. We not only need to find the canvas width, which is 1200 pixels and divide it by half. We also need to find our object, our images, width, divide it by half and subtract that from that number because if we were to, well once again, let's, let me show you here. Let's bring this down a little bit since we don't need all of it now. So you can see it's centered. It's right smack in the middle. This is right about here. It should be the middle of our canvas. If I go back to our code here and I don't subtract the object, our images, width that's divided in half and I refresh up here and we look at our canvas. You can see that it's not centered anymore because we didn't center the center of our object. We are now centering the left side of our object at the center. So this is the center, but to get the center of the object we need to find the width of our object, divide it by half and subtract that from the canvas width, divide it by half. So I don't know how to better explain that. Play around with the numbers and you'll get it if you don't understand. Hopefully you'll get it. So that's what we're doing there. Just to make things a little bit easier because of the size of our canvas. I could resize our canvas, it would probably be easier when you go, but you can also, you know, if I wanted to be up in the further top left of our screen here, our canvas, I can divide it by fours. Well, I don't want to divide the width by four. It doesn't really matter. I'm not trying to line things up perfectly here. That moves it up a little bit. So it's no longer centered. I was just showing you that so you could know how to center it. Really, this should still be too, to be proper. So now it's centered in the top left quadrant of our canvas. Anyway, let's play with these numbers some so you understand the other parts of it. So once we have all this set, obviously, the X and Y destination is gonna be the top left of our image now, which can be a little confusing. Confused me very much at first. And now our source, X and Y, which originally was our top left of our image, now kind of subtracts or moves over. So even though I said this the way I'm viewing this, I'm gonna explain it this way because this is the way I understand it. Let's just quickly look at it. So we have this image. You can see that part right there. I'm going to change this from 100 to 110, save it and refresh, and you'll see the image move to the left, not the image, but where it's cropped. Boom. So for me, I'm thinking, I'm thinking of this as more of a negative 110. I'm thinking of this as my starting point and now I'm subtracting 110 and pulling the image over that way. So that's how I'm thinking about it in my head. And if we were to change this, Y, we can change that to 10, save it. And now our image within our crop box, so the crop box is not gonna move, but our image is gonna move up 10 pixels up, which in my mind once again really is negative. I think it's kind of weird the way they did this, but boom, it moved up a little bit. So let's go ahead and type in like 350 here and 200 here, and that's gonna move it 350 pixels over and 200 pixels up. And now we're looking at my daughter's eyes. And so now let's see, let's move this, instead of 350, let's go 320. So now we're out of our eyes there. Kind of like the height. I wanna crop over a little bit more, get the other eye. So now I can come down here to the width. Let's change this to 200. There we go, let's make it a little bit bigger. We'll go 250. So understanding this is really just playing around with it. But basically the destination X and Y is once it's cropped, consider that a new image and that's the left and right, or top and left of our image. The width, the source width and the source height, you want the same because if they're not, so let's say our source width is 250. Let's say we change our destination width to 200. So it's a little different and we refresh this. You can see it's now squished our image. And so if you don't want that distortion, let's set it to 20, you can see it still has that full image in there, it's just squishing it. So if you don't want any image distortion, you're going to want to have the destination width and the destination height equal to the destination, or the source width and the source height. And once we save that and refresh up here, it goes back to that. So destination X and Y is the top left of our image now that it's cropped. The, or the cropped image. And then the source X and Y is basically pulling the image left and right out of the crop area. And the source width and source height and the destination width and destination height should be equal. Once again, if you don't want any distortion and that's how much of the image we're going to be seeing left, right, up and down. I really hope I explained that well because I understand it, but I do find it a little confusing. I really think that these should be negative numbers because I feel like we're moving, like this is the beginning here, we're moving that way that it should be negative two, or three 20 and negative 200. But that's not how whoever designed this is thinking. And I'm sure they have reason. I'm sure they're probably more proper than I am. That's just how my mind's working. Real quick, let's just have a quick look at this. So again, creating our canvas, getting its context, setting it to 2D, and where we have our image object here, which is a new image. Then when the image is loaded, or image object is loaded, we're going to grab our variables here and we're going to draw the image. What image are we going to draw? We'll image one, image one source, which is our image. So we put image here, it's going to look at the source of the image. So you have to make sure you have that set. And then it's going to input our variables here for the height with positioning, cropping, all that stuff. So we look at sizing, cropping, and all that stuff. I hope you found this useful. I hope you look forward to future tutorials. Hope it wasn't too complicated and that I explained it well. And the next tutorial, we're going to look at a simplified way of loading more than one image. And our original video on loading images we loaded to, but we kind of just duplicated what we had put in. Basically like we copied and pasted this and renamed everything that was image one to image two or whatever we want to call it. And the next tutorial, we're going to be looking at a function that we can create to shorten that up some. And again, I've mentioned previous tutorials. I've learned the Canvas tutorials, how to use the Canvas from tutorials on a website called html5canvasutorials.com. I'm not getting any kickbacks from there. I just want to give them crap because I've looked at other sites for Canvas tutorials and I found them confusing. And their site is very straightforward. You can hit the code right on the page, which made it nice in real time. And my tutorials are going to be similar to theirs. So I want to give them crap because I'm looking at my notes based on what I got from their site. Basically I take their tutorials, trim out excess stuff that I don't think I need to know for that specific job and maybe rename stuff or move things around to make it more sense to me. But other than that, my tutorials are very similar to theirs. So just want to give them credit for that. I thank you for watching. Be sure to check out the playlist if you haven't. Hopefully there's an annotation on the screen if I didn't forget. And I hope that you have a great day.