Exploring HTML Canvas with TypeScript

2022-07-10

Introduction

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!

The Demo

Interesting fact, the above is not a video, it's the final, live code, as built by Parcel.

The process

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!

Getting started

Let's set up a new project.

For the purposes of this tutorial, I'm assuming you have reasonably current:

• NodeJS,
• TypeScript and
• Parcel

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.

The steps:

• Create a new folder for your project
• Inside this folder, run npm init -y to get the basic Node project configured
• Now run tsc --init to configure TypeScript
• This is where you can run code . to open the project in VSCode if you like.
• Create a src folder
• Create an index.html file, a styles.css file and an app.ts file in the src folder.

The content for each file, at this stage, would be:

index.html

styles.css

app.ts

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!

Drawing something

Now that we have a blank canvas, let's draw something on it! Open up app.ts and replace the existing code with:

app.ts

Drawing something demo

Code Breakdown

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 animation process.

Drawing Lines

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 and update:

Of course, we also need to update our renderState function to draw the lines:

Full code for app.ts