Canvas Sketch Introduction

[00:00:00]
>> Mathew DesLauriers: So what we're gonna do, is first thing, you can just open the Canvas API docs link here. And you can maybe just keep this open, in case you're new to Canvas, there's lots of examples, lots of references here. Especially, this link here, Canvas rendering context 2D. And, so let's just break down what's happening, and then, we're gonna get into things a bit more.

[00:00:25]
And the way today's gonna go, is that it's probably gonna start a bit easy maybe, and then, as the day goes, it's gonna be a little bit more and more technical. But, just to start things off, we're using this line here at the top, which requires the library, canvas-sketch, is like I was saying earlier, it's both a command line interface, but it's also a JavaScript library.

[00:00:44]
And so we're requiring the JavaScript library using Node.js required syntax. And then, we have a settings object, and this is gonna define our parameters for our artwork, such as the size of artwork or export settings, or animation settings. Then, we have a sketch function. And the idea of this whole project is to encapsulate each of your artworks or each of your creative projects within a single function, if you can.

[00:01:11]
I find that it's a really nice way to basically wrap a project and encapsulate it, and then, sometimes reuse the same code from project to project. And so the idea is that you have a function, and this function returns another function. The function that it's returning is what I'm calling a render function.

[00:01:30]
So if you guys ever use React or View, or anything like that? So you know how in React, you have a render function, where you have some props coming in, and then, you're supposed to make it a pure function, so that every time you get the same props, you get the same output, the same JSX tree, or something like that.

[00:01:48]
So this is a similar concept. You have some props coming in, giving you that current state, the application, such as width and height. RIght now, it's always gonna be this same width and height. Which was 2048 wide by 2048 high in pixels. But sometimes, depending on settings, maybe you're doing it full screen instead of thick size, these prompts might change.

[00:02:11]
And the idea is that instead of returning a JSX tree in react, or in View, or whatever, you're rendering into your canvas. And so you still wanna try and keep it to be a pure function, if you can, even though we're setting state on this canvas. The idea is that every time we render into it, we're clearing the canvas, and restarting again from a fresh canvas.

[00:02:33]
So it is kind of still in a sense a pure function, but not really. But that's kind of the ethos of this project, is to be a bit more declarative and a bit more, in a sense, react, that kind of way of doing things. And then, you'll see here there's this context variable, and that is the Canvas API context.

[00:02:58]
So if you actually look at the docs, you'll see this example here. This is basically the most primitive example you can get with using canvas. You basically just have a canvas tag, and then, with that canvas tag, there's a function called get context and you say, I want a 2D context, and then, you can use the canvas API.

[00:03:20]
And you can, all of a sudden, fill things, fill shapes and rectangles, polygons, circles, text, etc., etc. And canvas-sketch does some of that sort of initial setup for you. So that's what this last line is doing, is it's saying using my sketch function, and using my settings, let's create a Canvas 2D boilerplate.

[00:03:43]
And so just a couple more basics for the APIs. So you'll see here that I'm setting a fill style, which is orange. And the Canvas API is kind of state based. So you set a color, or you set a certain parameter, like a line width, and then, anytime you render after that, it's gonna use that variable that you set.

[00:04:03]
That's what we're doing here. We're setting the fill color. And then, here, we're filling a rectangle, just a 2D square, with the x and y coordinates. You can try tweaking these and saving your file. You'll start to see, it'll start to push it along the x axis or along the y axis, and then, here is the width and height of the rectangle, you can divide that by two and see it's rendering half as much, etc., etc.