We need a reference to the Canvas object so that we will know where to display the Canvas API calls we will make from JavaScript.

First, we will define a new variable named theCanvas that will hold the reference to the Canvas object.

Next, we retrieve a reference to canvasOne by calling the getElementById() function of document, and passing the name canvasOne, which we defined as the id of the tag we created in the HTML page:

var theCanvas = document.getElementById("canvasOne");

Testing to See Whether the Browser Supports Canvas

Now that we have a reference to the canvas element on the HTML page, we need to test to see whether it contains a context. The Canvas context refers to the drawing surface defined by a web browser to support Canvas. Simply put, if the context does not exist, neither does the canvas. There are several ways to test this. This first test looks to see whether the getContext method exists before we call it using Canvas, as we have already defined it in the HTML page:

if (!theCanvas || !theCanvas.getContext) {

return;

}

Actually, this tests two things. First, it tests to see whether theCanvas does not contain false (the value returned by document.getElementById() if the named id does not exist). Then, it tests whether the getContext() function exists.

The return statement breaks out and stops execution if the test fails.

Another method—popularized by Mark Pilgrim on his HTML5 website, http://diveintohtml5.org—uses a function with a test of a dummy canvas created for the sole purpose of seeing whether browser support exists:

function canvasSupport () {

return !!document.createElement('testcanvas').getContext;

}

function canvasApp() {

if (!canvasSupport) {

return;

}

}

Our favorite method is to use the modernizr.js library, which you can find here: http://www.modernizr.com/. Modernizr—an easy-to-use, lightweight library for testing support for various web-based technologies—creates a set of static Booleans that you can test against to see whether Canvas is supported.

To include modernizr.js in your HTML page, download the code from http://www.modernizr.com/ and then include the external .js file in your HTML page:

To test for Canvas, change the canvasSupport() function to look like this:

function canvasSupport () {

return Modernizr.canvas;

}

We are going to use the modernizr.js method because we think it offers the best approach for testing whether Canvas is supported in web browsers.

Retrieving the 2D Context

Finally, we need to get a reference to the 2D context so we can manipulate it. HTML5 Canvas is designed to work with multiple contexts, including a proposed 3D context. However, for the purposes of this book, we only need to get the 2D context:

var context = theCanvas.getContext("2d");

The drawScreen() Function

It’s time to create actual Canvas API code. Every operation we perform on Canvas will be through the context object, as it references the object on the HTML page.

We will delve into writing text, graphics, and images to HTML5 Canvas in later chapters, so for now, we will only spend a very short time on the code of the drawScreen() function.

The “screen” here is really the defined drawing area of the canvas, not the whole browser window. We refer to it as such because within the context of the games and applications you will write, it is effectively the “window” or “screen” into the canvas display that you will be manipulating.

The first thing we want to do is clear the drawing area. The following two lines of code draw a yellow box on the screen that is the same size as the canvas. fillStyle() sets the color, and fillRect() creates a rectangle and puts it on the screen:

context.fillStyle = "#ffffaa";

context.fillRect(0, 0, 500, 300);

NOTE

Notice that we are calling functions of the context. There are no screen objects, color