The HTML5 canvas is an HTML element, just like <div>. However, the canvas does not contain other HTML elements, but it can contain a drawing generated by JavaScript code. In 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 <div> element:

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"); 

In an editor with completions, you can check which functions exist on the context. For instance, you can use context.fillRect(10, 10, 100, 100) to draw a filled rectangle from 10,10 to 110,110. The x...