Pro Android Web Game Apps: Using HTML5, CSS3 and JavaScript

Chapter 2

Graphics in the Browser: The Canvas Element

In this chapter, we will learn how to “draw” on a web page—or specifically, display arbitrary shapes using the canvas element. We will experiment with the drawing API, trying the most common things, such as drawing a line and filling a rectangle with the gradient fill. The code from this chapter serves as the basis for the complete game that we create in Chapter 3: Four Balls, a web version of a popular logical game where players try to arrange a line of four, same-colored tokens to win. (If you’re eager to take a peek at the final result, look at the first page of the next chapter.) We learn how to create the game’s visuals—the board and the tokens—in this chapter.

We’ll cover the following ...