HTML and CSS Reference
In-Depth Information
The tag has an id for easy reference along with a width and height . Unlike most HTML elements, you
generally never want to add a CSS width and height onto canvas elements. Those styles visually resize your
canvas but do not affect the pixel dimensions of the canvas, which is controlled by the width and height on
the element. Most of the time you should leave these alone.
Accessing the Context
Before you can do any drawing onto canvas, you need to fetch the context from the canvas element. The
context is the object that you actually make API calls against (not the canvas element itself.) For 2-D canvas
games, you can pull out the 2-D context, as shown in Listing 1-3 .
Listing 1-3: Accessing the rendering context
var canvas = document.getElementById('game');
var ctx = canvas.getContext && canvas.getContext('2d');
if(!ctx) {
// No 2d context available, let the user know
alert('Please upgrade your browser');
} else {
function startGame() {
// Let's get to work
First, grab the element from the document. These initial chapters use built-in browser methods for all DOM
(Document Object Model) interaction; later you are introduced to how to do the same things more concisely
using jQuery.
Next, call getContext on the canvas element. A double-ampersand ( && ) short circuit operator protects
you from calling a nonexistent method. This is used in the next if statement in case the visiting browser doesn't
support the canvas element. You always want to “fail loudly” in this case, so the players correctly blame their
browser instead of your code. “Failing loudly” means that instead of “failing silently” with a white screen and
an error hiding on the JavaScript console, the game explicitly pops up with a message that tells the user that
something went wrong.
There is a 3-D WebGL-powered rendering context available on desktop browsers (excluding Internet Ex-
plorer), but it is called glcanval and is available only on mobile Nokia devices at the time of this writing.
WebGL is another standard, separate from HTML5, that allows you to use hardware-accelerated 3-D graphics
in the browser.
Add the code from Listing 1-3 to a file named game.js . You now can start playing with the canvas ele-
Search WWH ::

Custom Search