Html5 and canvas role in game development











The HTML5 Specification, although still in draft, defines many new properties that describe how a browser should implement a bevy of new features. The specification defines new elements for encoding content (HTML) and presentation styles (CSS), as well as APIs for local and “web” storage, background processes, bidirectional communication, geolocation, and device orientation (through JavaScript APIs). The specification also combines HTML elements and JavaScript to define native, browserbased support for audio and video, as well as how browsers should render twodimensional content. The specifications are still in draft format, but browser developers are racing to build these features into their current generation of browsers.

canvas role in game

It is worth noting that <canvas> is not the only game in town for dealing with graphical assets. Another tool developers have access to is inline SVG (Scalable Vector Graphics). Where elements drawn to the <canvas> are bitmap (pixel-based), SVG elements are vector shapes. These shapes can be as simple as drawing a circle or square, or exceptionally complex polygons. SVG has been around for a while, however, the HTML5 specification allows developers to use SVG tags directly in their HTML, and no longer requires a third-party plugin. I do not cover SVG in the context of gaming in this book, as is not often used for games because rendering of the shapes can be slow inasmuch as these shapes attach the HTML Document Object Model (DOM).directly. I am covering game development, therefore performance is more important than being able to manipulate elements via the DOM. Hence, the <canvas> element, which handles everything as a pixel, is a better choice for gaming applications.

Game Terminology

Are you familiar with terms such as isometric, sprite, and avatar? As you begin developing games, you will quickly find a high degree of specialization, with specific jargon used when talking about the games. However, it is important to have a basic understanding of these terms, and what they mean as you come across them in thebook. Most of these terms are further described in later chapters, but I want to give you a preview of the main terms here.


What is Isometric

This is one of the most popular views, as it allows developers and artists to use some tricks to create a 3D environment without creating an entire 3D world. Sometimes called 2.5D, this game view looks down at the game space from a slight angle, giving the game more dimension than a flat 2D space. This is used in popular Facebook games like Farmville as it gives the illusion of 3D.