The world is a canvas (but for now maybe just a part of the document is).
While exploring options for my first ever javascript project, I thought it might be a fun exercise to build a simple game. I have fond memories being a youth in the school library trying to find strange games to pass the time, and also have not so fond memories of those same computers not letting me update the stupid javascript and (or?) adobe flash to run the games. It’s really the only context for this programming language I’ve had up until 4 weeks ago! I have since learned that javascript was looked down upon as a programming language, suited only for silly games and such, until google maps kind of blew everyone away with the power of single page applications with modifiable content. It seemed fine for me to lean into the trope and relive some of my carefree childhood.
This project was incredibly open ended, compared to our previous ones. It really felt like we could do ANYTHING. I saw some previous projects and it ranged from browser beat boxes/ synths to card collecting apps. Focusing on games was helpful to choose the lane, but really I had no understanding of how this all functions, where to start. I started with looking at resources for how to create simple games in javascript and found some quick tutorials, but they didn’t really explain what was going on. After looking at a couple browser games in developer view, I noticed they all started with some key building blocks, and ended in another commonality. Canvas elements to start it off, and game loops to bring it to life.
This was pretty much how everything started. I tried to google what it meant and basically only found “you just do this”. It’s very simple, but getting an actual idea of what it did was difficult at first.
Canvas is an html element, just like ‘p’, ‘img’, or ‘div’. It’s used almost across the board for games, but is also used for drawing shapes and things. This must be why it’s called ‘canvas’? So for the moment just think of it as any old element. We can assign it css styles just like ‘body’ and all the other things.
BUT whats up with line 2 and ctx and 2d?!
It seemed a ubiquitous variable, everyone used these exact letters, and nowhere did i find a straight answer.
Canvas, while being a generic html element, has access to “rendering contexts”, unlike other html elements. Most used here is our context “2d”, but there are 3d contexts like “WebGL”. So what does this all mean? Basically we’re creating a square and defining its x and y axis (2 dimensions!), with pixels as units. Simple.
We can use our ctx variable for drawing or interacting upon. Above, we’re drawing our background image, but we can also use it for drawing other objects, like our lovely character, and pass in our x and y axis as argument.
Here we see that we draw our canvas background again, which will give us a fresh scene to render our character jax. We’re also keeping track of jax’s x and y values, so that we can change them base upon user input, to re-render them in a loop.
Hopefully that helps clear up what is actually happening inside, and why canvas is such a useful tool for creating movement in javascript!
