The HTML5 canvas is an HTML element, just like
lib/game/index.ts we will quickly experiment with it.
We can get a reference to the canvas using
document.getElementById the same way we got a reference to a
const canvas = <HTMLCanvasElement> document.getElementById("game");
We cannot directly draw on the canvas; we have to get a rendering context first. Currently, two kinds of rendering contexts exist: a two dimensional context and a
webgl context, used for 3D rendering. The
webgl context is a lot harder to use. Luckily, Pac Man is 2D, so we can use the 2D context:
const context = canvas.getContext("2d"); ...