HTML5 Canvas [10]
NOTE
You can also use CSS styles to change the scale of the canvas. Unlike resizing, scaling takes the current canvas bitmapped area and resamples it to fit into the size specified by the width and height attributes of the CSS style. For example, to scale the canvas to a 400×400 area, you might use this CSS style:
style="width: 400px; height:400px"
We include an example of scaling the Canvas with a transformation matrix in Chapter 3.
There are also two public methods for the Canvas object. The first is getContext(), which we used earlier in this chapter. We will continue to use it throughout this book to retrieve a reference to the Canvas 2D context so we can draw onto the canvas. The second property is toDataURL(). This method will return a string of data that represents the bitmapped image of the Canvas object as it is currently rendered. It’s like a snapshot of the screen. By supplying different MIME types as a parameter, you can retrieve the data in different formats. The basic format is an image/png, but image/jpeg and other formats can be retrieved. We will use the toDataURL() in the next application to export an image of the canvas into another browser window.
Another Example: Guess The Letter
Now we will take a quick look at a more involved example of a “Hello World!”-type application, the game “Guess The Letter.” We’ve included this example to illustrate how much more Canvas programming is done in JavaScript than in the Canvas API.
In this game, shown in Figure 1-4, the player’s job is to guess the letter of the alphabet the computer has chosen randomly. The game keeps track of how many guesses the player has made, lists the letters he has already guessed, and tells the player whether he needs to guess higher (toward Z) or lower (toward A).
Figure 1-4. HTML5 Canvas “Guess The Letter” game
How the Game Works
This game is set up with the same basic structure as “Hello World!” canvasApp() is the main function, and all other functions are defined as local to canvasApp(). We use a drawScreen() function to render text on the canvas. However, there are some other functions included as well, which are described next.
The “Guess The Letter” Game Variables
Here is a rundown of the variables we will use in the game. They are all defined and initialized in canvasApp(), so they have scope to the encapsulated functions that we define locally.
guesses
This variable holds the number of times the player has pressed a letter. The lower the number, the better he has done in the game.
message
The content of this variable is displayed to give the user instructions on how to play.
letters
This array holds one of each letter of the alphabet. We will use this array to both randomly choose a secret letter for the game, and to figure out the relative position of the letter in the alphabet.
today
This variable holds the current date. It is displayed on the screen but has no other purpose.
letterToGuess
This variable holds the current game’s secret letter that needs to be guessed.
higherOrLower
This variable holds the text “Higher” or “Lower” depending on where the last guessed letter is in relation to the secret letter. If the secret letter is closer to “a,” we give the “Lower” instruction. If the letter is closer to “z,” we give the “Higher” instruction.
lettersGuessed
This array holds the current set of letters the player has guessed already. We will print this list on the screen to help the player remember what letters he has already chosen.
gameOver
This variable is set to false until the player wins. We will use this to know when to put the “You Win” message on the screen, and to keep the player from guessing after he has won.
Here is the code:
var guesses = 0;
var message = "Guess The Letter From a (lower) to z (higher)";
var letters = [
"a","b","c","d","e","f","g","h","i","j","k","l","m","n","o",
"p","q","r","s","t","u","v","w","x","y","z"