Introduction

Since being introduced to TypeScript back in early 2013 when it was around version 0.3, I have used it at every opportunity I could get my hands on, from refactoring the front-end of a hybrid desktop app, to building things like simple games, websites, and even high-volume production services such as automated voice communication systems — with a high degree of success.

Last year I built a simple paint program called paintbros as a hobby project to create raster graphics in a custom format for developing an experimental 2D game engine. While not feature complete, it demonstrates the concept of creating highly interactive web experiences using TypeScript and modern features of HTML5 and CSS3 — which we will examine in further detail.

The Basic Setup

Due to the custom nature of this application and its only system requirements being a modern browser on a full-screen device, no pre-existing frameworks were used. The idea is to utilize as many built-in features of modern browsers as possible — with the only dev dependencies being Node and a TypeScript compiler. There is a very good reason for doing it from scratch, as these performance and best practices metrics in Google Lighthouse reveal: