O'Reilly logo

TypeScript Blueprints by Ivo Gabe de Wolff

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Using the HTML5 canvas

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required