preface 
1. introduction to html5 canvas 
the basic html page 
（!doctype html） 
（html lang="en"） 
（meta charset="utf-8"） 
（title）（/title） 
a simple html5 page 
basic html we will use in this book 
（div） 
（canvas） 
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 
testing to see whether the browser supports canvas 
retrieving the 2d context 
the drawscreen0 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 initgame0 function 
the eventkeypressed0 function 
the drawscreen0 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 
examples of more advanced line drawing 
advanced path methods 
arcs 
bezier curves 
the canvas clipping region 
compositing on the canvas 
simple canvas transformations 
rotation and translation transformations 
scale transformations 
combining scale and rotation transformations 
filling objects with colors and gradients 
setting basic fill colors 
filling shapes with gradients 
filling shapes with patterns 
creating shadows on canvas shapes 
what's next 

3. the html5 canvas text apl 
displaying basic text 
basic text display 
handling basic text in text arranger 
communicating between html forms and the canvas 
using measuretext 
filltext and stroketext 
setting the text font 
font size， face weight， and style basics 
handling font size and face in text arranger 
font color 
font baseline and alignment 
text arranger version 2.0 
text and the canvas context 
global alpha and text 
global shadows and text 
text with gradients and patterns 
linear gradients and text 
radial gradients and text 
image patterns and text 
handling gradients and patterns in text arranger 
width， height， scale， and todataurl0 revisited 
dynamically resizing the canvas 
dynamically scaling the canvas 
the todataurl0 method of the canvas object 
final version of text arranger 
what's next 

4. images on the canvas 
the basic file setup for this chapter 
image basics 
preloading images 
displaying an image on the canvas with drawlmage0 
resizing an image painted to the canvas 
copying part of an image to the canvas 
simple cell-based sprite animation 
creating an animation frame counter 
creating a timer loop 
changing the tile to display 
advanced cell-based animation 
examining the tile sheet 
creating an animation array 
choosing the tile to display 
looping through the tiles 
drawing the tile 
moving the image across the canvas 
applying rotation transformations to an image 
canvas transformation basics 
animating a transformed image 
creating a grid of tiles 
defining a tile map 
creating a tile map with tiled 
displaying the map on the canvas 
zooming and panning an image 
creating a window for the image 
drawing the image window 
panning the image 
zoom and pan the image 
application: controlled pan and zoom 
pixel manipulation 
the canvas pixel manipulation apl 
application tile stamper 
copying from one canvas to another 
what's next 

5. math， physics， and animation 
moving in a straight line 
moving between two points: the distance of a line 
moving on a vector 
bouncing off walls 
bouncing a single ball 
multiple balls bouncing off walls 
multiple balls bouncing with a dynamically resized canvas 
multiple balls bouncing and colliding 
multiple balls bouncing with friction 
curve and circular movement 
uniform circular motion 
moving in a simple spiral 
cubic bezier curve movement 
moving an image 
creating a cubic bezier curve loop 
simple gravity， elasticity， and friction 
simple gravity 
simple gravity with a bounce 
gravity with bounce and applied simple elasticity 
simple gravity， simple elasticity， and simple friction 
easing 
easing out （landing the ship） 
easing in （taking off） 
what's next? 

6. mixing html$ video and canvas 
html5 video support 
theora + vorbis =ogg 
h.264 + $$$ =mp4 
vp8 + vorbis =webm 
combining all three 
converting video formats 
basic html5 video implementation 
plain-vanilla video embed 
video with controls， loop， and autoplay 
altering the width and height of the video 
reloading video in javascript 
a problem with events and embedded video in htmi.5 
video and the canvas 
displaying a video on html5 canvas 
html5 video properties 
video on the canvas examples 
using the currenttime property to create video events 
canvas video transformations: rotation 
canvas video puzzle 
creating video controls on the canvas 
animation revisited: moving videos 
what's next? 

7. working with audio 
the basic （audio） tag 
audio formats 
supported formats 
audacity 
example: using all three formats 
audio tag properties， functions， and events 
audio functions 
important audio properties 
important audio events 
loading and playing the audio 
displaying attributes on the canvas 
playing a sound with no audio tag 
dynamically creating an audio element in javascript 
finding the supported audio format 
playing the sound 
look ma， no tag! 
creating a canvas audio player 
creating custom user controls on the canvas 
loading the button assets 
setting up the audio player values 
mouse events 
sliding play indicator 
play/pause push button: hit test point revisited 
loop/no loop toggle button 
click-and-drag volume slider 
case study in audio: space raiders game 
why sounds in apps are different: event sounds 
iterations 
space raiders game structure 
iteration it 1: playing sounds using a single object 
iteration it2: creating unlimited dynamic sound objects 
iteration it3: creating a sound pool 
iteration it4: reusing preloaded sounds 
what's next 

8. canvas game essentials 
why games in htmls? 
canvas compared to flash 
what does canvas offer? 
our basic game html5 file 
our game's design 
game graphics: drawing with paths 
needed assets 
using paths to draw the game's main character 
animating on the canvas 
game timer loop 
the player ship state changes 
applying transformations to game graphics 
the canvas stack 
game graphic transformations 
rotating the player ship from the center 
alpha fading the player ship 
game object physics and animation 
how our player ship will move 
controlling the player ship with the keyboard 
giving the player ship a maximum velocity 
a basic game framework 
the game state machine 
the update/render （repeat） cycle 
the frameratecounter object prototype 
putting it all together 
geo blaster game structure 
geo blaster global game variables 
the player object 
geo blaster game algorithms 
arrays of logical display objects 
level:knobs 
level and game end 
awarding the player extra ships 
applying collision detection 
the geo blaster basic full source 
rock object prototype 
what's next 

9. combining bitmaps and sound 
geo blaster extended 
geo blaster tile sheet 
rendering the other game objects 
adding sound 
pooling object instances 
adding in a step timer 
geo blaster extended full source 
creating a dynamic tile sheet at runtime 
a simple tile-based game 
micro tank maze description 
the tile sheet for our game 
the playfield 
the player 
the enemy 
the goal 
the explosions 
turn-based game flow and the state machine 
simple tile movement logic overview 
rendering logic overview 
simple homegrown al overview 
micro tank maze complete game code 
what's next 

10. mobilizing gameswith phonegap 
going mobile! 
introducing phonegap 
the application 
the code 
examining the code for bsbingo.html 
the application code 
creating the ios application with phonegap 
installing xcode 
installing phonegap 
creating the bs bingo phonegap project in xcode 
testing the new blank application in the simulator 
integrating bs bingo into the project 
setting the orientation 
changing the banner and icon 
testing on the simulator 
adding in an iphone "gesture" 
adding the gesture functions to index.html 
testing on a device 
using xcode to target a test device 
beyond the canvas 
what's next 

11. further explorations 
3d with webgl 
what is webgl? 
how do i test webgl? 
how do i learn more about webgl? 
what does a webgl application look like? 
full code listing 
further explorations with webgl 
webgl javascript libraries 
multiplayer applications with electroserver 5 
installing electroserver 
the basic architecture of a socket-server application 
the basic architecture of an electroserver application 
creating a chat application with electroserver 
testing the application in google chrome 
further explorations with electroserver 
this is just the tip of the iceberg 
conclusion 
index