Using the Canvas API

[00:00:00]
>> So why don't we mess around in our app here. I'm going to go to my index.html, and I'm not even gonna worry about this app element. I'm just gonna put a canvas here. I'm not even gonna say anything else special about it. And this is also note that I can load other scripts than main here.

[00:00:28]
Typically the idea is, I would just have one entry point, same as our package, like main.js would do everything I want it to do. But let's say I want to have another module that's interacting with a different part of the page or the site. So I could make a module called canvas.js.

[00:00:48]
Does that exist yet? No, it does not. Let's change that. So we can make a new file. We can call it canvas.js. And this is where we can put our canvas manipulation code, for example. Now, as you notice, there's a few different things happening here. Most things are in the root directory of this project.

[00:01:14]
Well, we have our node modules, we know about that. There's also a public folder. These are gonna be assets that are served up just with the site, statically, no processing, just you can now go find the favicon or whatever. Anyway, another common thing that you see a lot of codebases do is have a little bit more structure.

[00:01:36]
Cuz once we start adding more and more modules, this is gonna get a little unwieldy of having everything in one directory, in one folder. So what you'll often see people do, and we can just, no, not there. We can just do this right now, is have [LAUGH] a src folder or src directory where typically, Our littler modules that we're importing into our other modules, all of the source code for all these different things we might wanna be doing often lives in this src directory.

[00:02:09]
Now, when I just dragged and dropped that counter.js file, which, remember, my main.js is importing, VS Code, and this is VS Code magic, is like, you moved a file called counter.js that your other files are importing as counter.js. Do you want to now update those import statements so that we're importing src/counter.js?

[00:02:33]
And to which I will say, yes, VS Code, please do your job and make my life easier. And so now you'll see that VS Code automatically updated my main.js file to import from the src directory instead of the root directory, the ./ that it was doing before. So that's just some VS Code magic for us here.

[00:02:55]
I'm also gonna put my new empty Canvas.js in there. And at this point, it's just asking me if you're intending to move this or did you just swipe on your computer accidentally, or are you a cat walking on a keyboard [LAUGH]? And so, yes, I want to move it.

[00:03:12]
It didn't ask me about any imports because there are no imports, cuz there's nothing to import. So let's fix that. Okay, so here is where I could do this type of thing. And now I'm actually not going to export anything right now because we have added this script tag that's going to run this script as a module in the browser in this page.

[00:03:39]
So it's gonna run through those lines that code and do what they say. And let's see what happens. Okay, so going back to Canvas, what we're doing is, we're setting the fillStyle to yellow, and then we are filling a rectangle with some numbers here, which we'll talk about in a sec.

[00:03:58]
And so once I save my, what happened? Did I? I turned it into an F, cool. Okay, once I save my file, hopefully, My, what happened? Something has gone awry. Disallowed MIME type, cool. Aha, I had not imported it, but I had referred to it as /canvas.js and not src/canvas.js.

[00:04:34]
This is gonna be ultimately some Vite magic that's gonna turn whatever path I put in here in my src values into whatever it's gonna ultimately resolve to in the build, or in this case, in the temporary build that's running in my dev server. And it's not really a build in the live action freshest modules that are running in my dev server.

[00:04:59]
So again, we live and we learn. Yes, so VS Code did not save us. Now we have no error and a yellow square, well, two yellow squares. But this one we put there, so we can feel good about that. Is this the most beautiful website you've ever seen in your life?

[00:05:19]
Okay, so now we have seen essentially that we took a blank canvas, tabula rasa, and we filled a yellow rectangle. And where did we fill it? Well, we filled it starting at the position, the coordinate x0, y0. We filled a rectangle that is 100 pixels wide and 100 pixels high.

[00:05:47]
So we started the corner of the rectangle. Imagine we're in our little MS Paint or whatever, and we dragged down 100 pixels and 100 pixels over, and we painted that rectangle. And it was yellow because the current fillStyle was yellow. So this is Canvas. There's all kinds of other things we can do with it, and that is what we're gonna get into.

[00:06:11]
But suffice it to say, it's great at filling rectangles. It can also do stuff like text. And a good thing to keep in mind that we might be comfortable with if we're used to positioning fixed elements and stuff like that. But one thing that if we're used to doing, I don't know, non-web data visualization or math or things like that, we're not always used to the way that the Canvas coordinate system, which is set up, which is 0, 0 is at the top-left of the element.

[00:06:43]
Well, luckily, at least x and y are still going the directions, but the y-axis goes down, the values increase as you go down, and the x-axis increases as you go to the right. So this is where basically we told JavaScript, okay, take this Canvas context, start at 0, 0, and draw a rectangle that is yellow, fill it with yellow, that is 100 pixels wide and 100 pixels tall.

[00:07:16]
So we can also do that with text. And similarly to how we have, can you just please wrap. Okay, [LAUGH] similar to how we have the .fillStyle, we can change that after we draw the yellow rectangle. If we wanna draw something black now, we have to imperatively change the value of fillStyle, which can cause some fun accidents.

[00:07:42]
But anyway, and then we can also set other properties on the context, like the font style. And then we have, analogous to fillRect, we have a fillText which, for example, we could pass in our string.js, give it an x and a y to position the kind of anchor of the text element.

[00:08:01]
Which again, there's all kinds of parameters and things that we can, there's fanciness that we can do. And then this last one is the, this is where the text begins, I believe the bottom-left of the text. And then this is how wide we want to allow it to be at most, max width.

[00:08:21]
So if I save this now and I go back to my instantly reloaded Vite app, I have a much less pretty version of the JavaScript logo that, but we drew it, we didn't just import it from some SVG. So this is all to say, we can do whatever we want on the Canvas.

[00:08:40]
We can just go nuts.