Scaling the Canvas

[00:00:00]
>> Okay, so I wasn't very positioned in the frame. Okay, all right, now I'm looking right at the camera. And we're now getting into another little issue that we have here. Any idea why I'm getting this very weird corner of my forehead?
>> Canva size?
>> The size of these two things is different.

[00:00:21]
We didn't set any canvas size, any width or height on our element in the canvas, and the video has some size that it is getting from the camera that's attached, right? So they may or may not line up. And so probably what we wanna do is make sure that we are drawing the right size of things.

[00:00:46]
And this is again where all those arguments to our draw functions come in. We can poke around, we can try a few different things. Like, for example, we can do like video Width is a property that we should have. Let's just try logging it. Whoa, console that console, okay.

[00:01:09]
And then on the canvas element, I believe we also have access to a width property also it's a property it's not a function, [LAUGH] everything is a function until it's not a function. Okay, so let's, [LAUGH] Just log these as we draw this misshapen photo. See what happens.

[00:01:33]
Okay, so you see the canvas, I believe the default width for the canvas element if you don't set one, is 300 pixels wide, whereas the video is 640 pixels wide. So that's not gonna happen. That's not gonna help us, right? We can make sure that we're drawing the width here, video.video width if we want to make sure that we're drawing all 600 and 40 pixels, we can do that and then we also match it with there's a corresponding video height.

[00:02:06]
But. Once again, if the canvas is too small, that ain't gonna happen so we can scale down like for example, we could do some multiplying of ratios to like scale down the ratio of the widths of the heights to whatever the width of the canvas is, etc. But for now, in the interest of getting on with our lives, let us just set the width on our canvas.

[00:02:37]
I wonder, let's see, can we mess with it? Can this width equals video width? I don't know. Will it work? Let's find out. Will it blend? Doesn't seem like it. Well, all right. No, it worked on the width.
>> Yap,
>> At least now I have a whole forehead.

[00:02:58]
[LAUGH] But I don't believe in our, yes, there is a height. Let's do it, let's set the height as well, okay, canvas.height = video.videoHeight. And now, I mean, we could use either of these properties now in our draw image call. Moment of truth, drumroll please. [LAUGH] The most beautiful photo ever taken.

[00:03:29]
[LAUGH] Okay. All right, do I look super silly? Sure I do. But, did we take a selfie with JavaScript and a whole bunch of modern APIs and a modern build tool with a fancy logo? Also yes, so the takeaway here is hopefully that although this may not be the most exciting piece of the puzzle, it's a lot of fun.

[00:03:59]
[LAUGH] The most exciting node package ever written. It's [LAUGH] also going to be [LAUGH] a way to a small project that we can use to teach ourselves about all these different APIs that we can then go on and dig deeper into. So where we're going to leave us off here, it's not on my face, is essentially with the idea that like now that we have been through a whole bunch of small projects, we did our modals, and we did our, and we got lots of errors, and we.

[00:04:40]
Found out lots of ways that our assumptions can be wrong. And we had a few quick and not so quick wins along the way. And also so there is a version of my code up in this repository. Some of you might have already clicked this button. I have committed the cardinal sin of not having a readme in this repo, sorry.

[00:05:01]
But in github/vacila, vacila, or that's my name and initial. And then selfie minus cam is where you can find the source code that is not go be identical to what we just typed out together, but basically does the same thing. And that is also linked on the course landing page.