Exploring HTML Canvas with TypeScript
I've been playing with TypeScript outside the Node environment where I use it in my day job and given how much more productive I've become in TypeScript when building API's and CLI applications, I figured it's time to start playing with it in the browser as well.
My plan is to relive some fond memories from 20+ years ago, when I did a lot of Pascal programming purely for fun. In those days, I would spend school holidays building screensavers and small games for myself and my friends, keeping us entertained for countless hours.
To start with, I wanted to recreate a classic : Bouncing Lines!
Interesting fact, the above is not a video, it's the final, live code, as built by Parcel.
We'll use NodeJS, TypeScript and Parcel to make all of this work. Along the way, I'll teach you bad code habits and do really dumb things with TypeScript. Still, it can be fun to throw caution to the wind and just get things done!
Let's set up a new project.
For the purposes of this tutorial, I'm assuming you have reasonably current:
installed and available on your path. I also use Visual Studio Code to edit my project files, but you can use whatever makes you happy.
- Create a new folder for your project
- Inside this folder, run
npm init -yto get the basic Node project configured
- Now run
tsc --initto configure TypeScript
- This is where you can run
code .to open the project in VSCode if you like.
- Create a
- Create an
styles.cssfile and an
app.tsfile in the
The content for each file, at this stage, would be:
If you now run
parcel index.html from the
src folder, and navigate to http://localhost:1234
in your browser, you should see a black screen. Not impressive, but it's a start!
Now that we have a blank canvas, let's draw something on it! Open up
app.ts and replace the
existing code with:
Drawing something demo
So there's quite a lot happening here, let's see what gives.
First, we get a handle to the canvas element, then set it's width and height to whatever size the window in which we are operating in allows. Once that's done, we grab the 2D context that we'll use to draw to the canvas with.
Next, we declare a variable that will be used to track the state of the animation of the big grey rectangle.
A function called
updateState is declared and will be responsible for updating the animation
state whenever it is called. This function, in turn will call the
renderState function that
does the actual drawing and ends with a call to
window.requestAnimationFrame, which lets
the browser notify the function when a new frame is required.
Now we declare the
renderState function, which is responsible for the drawing of the
rectangle. Finally, an initial call to
requestAnimationFrame is made, which kicks off the
Now that we know how to draw something to the canvas, and have the browser notify us when a new frame is requested, we can put that knowledge to good use to create the bouncing line drawing.
For the lines animation, we'll need to keep track of a few things:
Firstly, we'll need to know how many points we are drawing lines between. The we'll need to keep track of the X and Y positions, and speeds, of these points, as well as a colour associated with them.
Now that we have somewhere to store these values, lets set up some random starting values:
We can now change our
updateState function to account for the new variables we need to check
Of course, we also need to update our
renderState function to draw the lines:
Full code for app.ts
Return to the blog index