11. Building Games with Canvas API

One of the web browser’s most exciting new capabilities in recent years has been the adoption of the <canvas> tag in HTML5 and its associated JavaScript API. Alone in an HTML document, it does nothing. However, combine it with the power of JavaScript and you have a blank drawing surface in your page to which you can add shapes, images and text to your heart’s content. The contents of a canvas element are represented by pixel data on a flat drawing surface rather than individual DOM elements in a document, so if you draw over an existing shape with another, there’s no record in the document that the original shape ever existed. By repeatedly clearing and redrawing on the same canvas over a period of time with small variations, we can give the impression of animation and movement within the element. By connecting up this animation to a controller on a touchscreen, mouse or keyboard, we allow the user the ability to manipulate what happens on screen. Combine this with some behavioral logic and we can use the <canvas> element to build games that run in the browser. In this chapter, we’ll look at the basic drawing operations in the Canvas JavaScript API before delving into detail on how to build games using it, including building a working version of the classic arcade game, Frogger.