Online Book Reader

Home Category

HTML5 Canvas [266]

By Root 6402 0
game developers blogs.

Jeff has worked as a web development manager at Mattel Toys for the past 14 years, helping to create Mattel’s extensive online presence.

Colophon

The animal on the cover of HTML5 Canvas is the New Zealand kaka (Nestor meridionalis), a parrot endemic to that country. The kaka’s name comes from the Maori word for parrot (a duplication of the word kā, Maori for “to screech”). It is part of the Strigopidae family, which diverged from other parrots 80–100 million years ago when the landmass that is now New Zealand broke apart from the supercontinent Gondwana. A defining characteristic of this family of parrots is the bristles on their tongues, which are used to collect nectar.

A medium-sized parrot about 18 inches in length, the kaka is stocky and has a short, square tail. Its feathers are primarily olive-brown, with brighter splashes of crimson on the underwings and rump. It also has yellow-brown spots on its cheeks and a gray crown. It possesses the sharp curved beak common to many parrot species, which it uses to pry seeds loose from cones and dig up insects. The kaka also eats fruit, berries, nectar, and flowers.

These birds are primarily arboreal, living in the canopies of New Zealand forests. Very social creatures, kakas live in large flocks that sometimes include other local parrot species as well. In winter, breeding pairs build nests in hollow trees, and lay a clutch of two to four eggs. Both parents help feed their young.

The kaka is currently endangered due to deforestation, predators, and competition for food with non-native species. The closely related kea and kakapo parrots are facing similar challenges—and in fact, two species within the Nestor genus have already gone extinct (most recently in 1851).

The cover image is from Cassell’s Natural History. The cover font is Adobe ITC Garamond. The text font is Linotype Birka; the heading font is Adobe Myriad Condensed; and the code font is LucasFont’s TheSansMonoCondensed.

Table of Contents

HTML5 Canvas

Preface

Running the Examples in the Book

What You Need to Know

How This Book Is Organized

Conventions Used in This Book

Using Code Examples

We’d Like to Hear from You

Safari® Books Online

Acknowledgments

1. Introduction to HTML5 Canvas

The Basic HTML Page

…

A Simple HTML5 Page

Basic HTML We Will Use in This Book

The Document Object Model (DOM) and Canvas

JavaScript and Canvas

JavaScript Frameworks and Libraries

Where Does JavaScript Go and Why?

HTML5 Canvas “Hello World!”

Encapsulating Your JavaScript Code for Canvas

Adding Canvas to the HTML Page

Using document to reference the canvas element in JavaScript

Testing to See Whether the Browser Supports Canvas

Retrieving the 2D Context

The drawScreen() Function

Debugging with Console.log

The 2D Context and the Current State

The HTML5 Canvas Object

Another Example: Guess The Letter

How the Game Works

The “Guess The Letter” Game Variables

The initGame() Function

The eventKeyPressed() Function

The drawScreen() Function

Exporting Canvas to an Image

The Final Game Code

What’s Next

2. Drawing on the Canvas

The Basic File Setup for This Chapter

The Basic Rectangle Shape

The Canvas State

What’s Not Part of the State?

How Do We Save and Restore the Canvas State?

Using Paths to Create Lines

Starting and Ending a Path

The Actual Drawing

lineCap attributes

context.lineCap

lineJoin attributes

context.lineJoin

lineWidth

strokeStyle

Examples of More Advanced Line Drawing

Advanced Path Methods

Arcs

context.arc()

context.arcTo()

Bezier Curves

The Canvas Clipping Region

Compositing on the Canvas

Simple Canvas Transformations

Rotation and Translation Transformations

Lesson 1: Transformations are

®Online Book Reader