Abstract
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.
Access this chapter
Tax calculation will be finalised at checkout
Purchases are for personal use only
Author information
Authors and Affiliations
Rights and permissions
Copyright information
© 2014 Den Odell
About this chapter
Cite this chapter
Odell, D. (2014). Building Games with Canvas API. In: Pro JavaScript Development. Apress, Berkeley, CA. https://doi.org/10.1007/978-1-4302-6269-5_11
Download citation
DOI: https://doi.org/10.1007/978-1-4302-6269-5_11
Published:
Publisher Name: Apress, Berkeley, CA
Print ISBN: 978-1-4302-6268-8
Online ISBN: 978-1-4302-6269-5
eBook Packages: Professional and Applied ComputingProfessional and Applied Computing (R0)Apress Access Books