Index

A

A* path finding
about, Simple A* Path Finding on a Tile Grid, A* Applied to a Larger Tile Map
adding node weights, A* with Node Weights, Moving a Game Character Along the A* Path
applied to larger tile map, A* Applied to a Larger Tile Map, A* Taking Diagonal Moves into Account
moving game characters along paths, Moving a Game Character Along the A* Path, Tanks That Pass Through Walls?
poorly designed tile maps and, Tanks That Pass Through Walls?, Tanks That Pass Through Walls?
taking diagonal moves into account, A* Taking Diagonal Moves into Account, A* with Node Weights, A* with Node Weights and Diagonals, Moving a Game Character Along the A* Path
Acid music-looping software, Example: Using All Three Formats
alignment (text)
about, Font Baseline and Alignment, Handling text baseline and alignment
horizontal, Horizontal alignment
vertical, Vertical alignment
angle of incidence, Bouncing Off Walls
angle of reflection, Bouncing Off Walls
angles, Moving on a Vector
(see also bouncing effects)
converting to radians, Moving on a Vector
finding in radians, Step 3: Code the transform algorithm, Redrawing the player ship to start at angle 0
animation
bouncing objects off walls, Bouncing Off Walls, Multiple Balls Bouncing with Friction
Box2D library and, Box2D and the Canvas, Box2D Further Reading
cell-based, Simple Cell-Based Sprite Animation, Moving the Image Across the Canvas
curve and circular movement, Curve and Circular Movement, Simple Gravity, Elasticity, and Friction
easing technique, Easing, Box2D and the Canvas
in Geo Blaster Basic game, Using Paths to Draw the Game’s Main Character, The Player Ship State Changes, Game Object Physics and Animation, Giving the Player Ship a Maximum Velocity
in Geo Blaster Extended game, Rendering the saucers, Creating a Dynamic Tile Sheet at Runtime, Creating a Dynamic Tile Sheet at Runtime
gradients and, Animated Gradients, The Future of Text on the Canvas
Hello World application, Hello World Animated Edition, Drawing the Text
moving in a straight line, Moving in a Straight Line, Bouncing Off Walls
moving video, Animation Revisited: Moving Videos, Capturing Video with JavaScript
rotating cube application, Animating the cube
ship movement, How Our Player Ship Will Move, Redrawing the player ship to start at angle 0
simple forces of nature in, Simple Gravity, Elasticity, and Friction, Easing
for transformed images, Animating a Transformed Image, Animating a Transformed Image
animation loops, Animation Loop, Animating a Transformed Image
application states, The Game State Machine, The Game State Machine, Game application states
arcs, drawing, Arcs
Array object
indexOf() method, The eventKeyPressed() Function, DisplayList.js
push() method, The eventKeyPressed() Function
toString() method, The drawScreen() Function
arrays
in Geo Blaster Basic game, The array to hold our key presses, Arrays of Logical Display Objects, Explosions and particles
holding tiles for animation, Creating an Animation Array
numbering in, Examining the Tile Sheet, Displaying the Map on the Canvas
scrolling tile-based worlds, Scrolling a Tile-Based World, Second, a Two-Dimensional Array to Describe Our Game World
Space Raiders game, Initializing the game: no global variables
storing map data, Storing the map data
tracing movement with, Tracing movement: A path of points, Moving on a Vector
Video Puzzle example, Swapping two elements in a two-dimensional array
<article> tag, The Basic HTML5 Page
astar.js
about, What Is A*?
search function, What Is A*?, A* Taking Diagonal Moves into Account, A* with Node Weights and Diagonals, Moving a Game Character Along the A* Path, Drawing the tank on the screen
Asteroids game (see Geo Blaster games)
Atari Asteroids game (see Geo Blaster games)
Audacity tool, Audacity
audio
creating audio player, Creating a Canvas Audio Player, Case Study in Audio: Space Raiders Game
displaying attributes on Canvas, Displaying Attributes on the Canvas, Playing a Sound with No Audio Tag
events supported, Important Audio Events, Loading and Playing the Audio, Loading the Button Assets
in Geo Blaster Extended game, Adding Sound, Playing sounds
HTML5 formats supported, Audio Formats, Audio Tag Properties, Functions, and Events, Finding the Supported Audio Format
loading and playing, Loading and Playing the Audio
mobile devices and, Example: Using All Three Formats
playing sounds without <audio> tag, Playing a Sound with No Audio Tag, Creating a Canvas Audio Player
properties, functions, and events, Audio Tag Properties, Functions, and Events, Important Audio Events
Space Raiders game, Case Study in Audio: Space Raiders Game, Web Audio API
audio codecs, Theora + Vorbis = .ogg
audio controls
click-and-drag volume slider, Click-and-Drag Volume Slider, Case Study in Audio: Space Raiders Game
creating custom, Creating Custom User Controls on the Canvas
inverse relationship, Play/Pause Push Button: Hit Test Point Revisited
loading button assets, Loading the Button Assets, Loading the Button Assets
loop/noloop toggle button, Loop/No Loop Toggle Button
mouse events, Mouse Events
play/pause button, Play/Pause Push Button: Hit Test Point Revisited, Play/Pause Push Button: Hit Test Point Revisited
setting up values, Setting Up the Audio Player Values
sliding play indicator, Sliding Play Indicator
Audio Data API, Web Audio API
audio element (see HTMLAudioElement object)
audio formats, Audio Formats, Audio Tag Properties, Functions, and Events, Finding the Supported Audio Format
audio player example
about, Creating a Canvas Audio Player
click-and-drag volume slider, Click-and-Drag Volume Slider, Case Study in Audio: Space Raiders Game
creating custom controls for, Creating Custom User Controls on the Canvas
inverse relationship in, Play/Pause Push Button: Hit Test Point Revisited
loading button assets, Loading the Button Assets, Loading the Button Assets
loop/noloop toggle button, Loop/No Loop Toggle Button
mouse events, Mouse Events
play/pause button, Play/Pause Push Button: Hit Test Point Revisited, Play/Pause Push Button: Hit Test Point Revisited
setting up player values, Setting Up the Audio Player Values
sliding play indicator, Sliding Play Indicator
<audio> tag
about, The Basic <audio> Tag
autoplay attribute, Example: Using All Three Formats
controls attribute, The Basic <audio> Tag, Example: Using All Three Formats
creating audio player, Creating a Canvas Audio Player, Case Study in Audio: Space Raiders Game
displaying attributes on Canvas, Displaying Attributes on the Canvas, Playing a Sound with No Audio Tag
formats supported, Audio Formats, Audio Tag Properties, Functions, and Events
HTMLAudioElement object and, Audio Tag Properties, Functions, and Events
loading and playing audio, Loading and Playing the Audio
loop attribute, Example: Using All Three Formats
playing sound without, Playing a Sound with No Audio Tag, Creating a Canvas Audio Player
src attribute, The Basic <audio> Tag, Audio Functions

B

b2Body class
GetAngle() method, Rendering the Boxes
GetFixtureList() method, Translating to the Canvas
GetPosition() method, Translating to the Canvas, Rendering the Boxes
GetUserData() method, Rendering the Boxes
SetLinearVelocity() method, Bouncing Balls Revisited
SetUserData() method, Creating the Boxes
b2debugDraw class
about, Rendering b2debugDraw vs. Canvas Rendering
e_jointBit property, Rendering b2debugDraw vs. Canvas Rendering
e_shapeBit property, Rendering b2debugDraw vs. Canvas Rendering
SetFillAlpha() method, Rendering b2debugDraw vs. Canvas Rendering
SetFlag() method, Rendering b2debugDraw vs. Canvas Rendering
SetLineThickness() method, Rendering b2debugDraw vs. Canvas Rendering
SetScaleFactor() method, Rendering b2debugDraw vs. Canvas Rendering
SetSprite() method, Rendering b2debugDraw vs. Canvas Rendering
b2Fixture class, Rendering the Boxes
b2World class
ClearForces() method, drawScreen()
DrawDebugData() method, drawScreen(), Translating to the Canvas
Step() method, drawScreen()
background, clearing and displaying, Clearing and Displaying the Background
balls
bouncing multiple, Multiple Balls Bouncing Off Walls, Multiple Balls Bouncing with Friction
bouncing single, Bouncing a Single Ball, Multiple Balls Bouncing Off Walls
bouncing with friction, Multiple Balls Bouncing with Friction, Multiple Balls Bouncing with Friction
Box2D example, Bouncing Balls Revisited, Translating to the Canvas
collisions with, Multiple Balls Bouncing and Colliding, Ball collisions in depth
creating with Box2D, Creating Balls
curve and circular movement, Curve and Circular Movement, Simple Gravity, Elasticity, and Friction
drawing, Drawing the ball
interactions in physics, Ball interactions in physics
shooting balls at boxes game, Interactivity with Box2D, Box2D Further Reading
simulating forces of nature, Simple Gravity, Elasticity, and Friction, Easing
updating positions of, Updating positions of objects
baseline (font), Vertical alignment, Handling text baseline and alignment
Bezier curves
about, Bezier Curves
creating loops, Creating a Cubic Bezier Curve Loop, Simple Gravity, Elasticity, and Friction
moving images along, Moving an Image, Creating a Cubic Bezier Curve Loop
moving objects along, Cubic Bezier Curve Movement, Moving an Image
Bezier, Pierre, Cubic Bezier Curve Movement
BinaryHTTP protocol, The ElectroServer admin tool
BitMapData object, What Does Canvas Offer?
bitmaps
current, What’s Not Part of the State?
Geo Blaster Basic game and, Using Paths to Draw the Game’s Main Character
Geo Blaster Extended game and, Geo Blaster Extended
<body> tag
about, The Basic HTML5 Page
BS Bingo game and, Changing the Canvas style properties
<canvas> tag and, The HTML5 Canvas Object
bouncing effects
about, Bouncing Off Walls
bouncing videos, Animation Revisited: Moving Videos, Capturing Video with JavaScript
Box2D example, Bouncing Balls Revisited, Translating to the Canvas
elasticity and, Gravity with Bounce and Applied Simple Elasticity, Easing
gravity and, Simple Gravity with a Bounce, Easing
multiple balls off walls, Multiple Balls Bouncing Off Walls, Multiple Balls Bouncing with Friction
single ball off wall, Bouncing a Single Ball, Multiple Balls Bouncing Off Walls
bounding box theory
about, Combining Scale and Rotation Transformations
Geo Blaster Extended game, The new boundingBoxCollide() algorithm
Space Raiders game, Bounding box collision detection
Bourg, David M., What Is A*?
Box2D library
about, Box2D and the Canvas
additional information, Box2D Further Reading
b2debugDraw class, Rendering b2debugDraw vs. Canvas Rendering, Bouncing Balls Revisited
bouncing balls example, Bouncing Balls Revisited, Translating to the Canvas
creating balls, Creating Balls
defining walls in, Defining the Walls in Box2D
downloading Box2DWeb engine, Downloading Box2dWeb
Hello World application, Box2D Hello World
including, Including the Library
interactivity with, Interactivity with Box2D, Box2D Further Reading
Box2DWeb engine
about, How Does Box2dWeb Work?
downloading, Downloading Box2dWeb
initializing world, Creating a Box2dWeb World
units in, Units in Box2dWeb, Units in Box2dWeb
browsers (see web browsers)
BS Bingo game
about, The First Application
application code for, The Application Code
examining code for, The TextButton.js file, The onMouseMove() function
full source code, The Code, The Code
scaling, Scaling the Game for the Browser, Testing the Game on an Actual Device
testing, Testing the Game on an Actual Device, Testing the Game on an Actual Device
buffers, Initialization in canvasApp()
bull's eyes, as moving targets, Moving an Image, Creating a Cubic Bezier Curve Loop

C

C3DL library, C3DL
Canvas (see HTML5 Canvas)
Canvas 2D Drawing API (see drawing on Canvas)
Canvas games (see game development)
Canvas Image API (see images on Canvas)
Canvas object
clearElementPath() method, So what kind of mechanism are they suggesting?
createImageData() method, The Canvas Pixel Manipulation API
creating, The HTML5 Canvas Object
dir property, Horizontal alignment
dynamically resizing, Dynamically Resizing the Canvas, Dynamically Scaling the Canvas, Multiple Balls Bouncing with a Dynamically Resized Canvas, Multiple Balls Bouncing and Colliding
getContext() method, Testing to See Whether the Browser Supports Canvas, Retrieving the 2D Context, The 2D Context and the Current State, The HTML5 Canvas Object
height property, The HTML5 Canvas Object, Resetting the Canvas Width and Height, Dynamically Resizing the Canvas, Dynamically Scaling the Canvas, Bouncing a Single Ball, Multiple Balls Bouncing with a Dynamically Resized Canvas, Multiple Balls Bouncing and Colliding
mouse events and, Adding mouse events to the canvas
scaling dynamically, Dynamically Scaling the Canvas
setAttribute() method, Dynamically Scaling the Canvas
setElementPath() method, So what kind of mechanism are they suggesting?
supportsContext() method, supportsContext()
Time Stamper application and, Adding mouse events to the canvas
toBlob() method, The HTML5 Canvas Object, toDataURLHD(), toBlob(), toBlobHD()
toBlobHD() method, toDataURLHD(), toBlob(), toBlobHD()
toDataURL() method, The HTML5 Canvas Object, Exporting Canvas to an Image, The toDataURL() Method of the Canvas Object, Example 2: Put Video on the Canvas and Take a Screenshot, Example 2: Put Video on the Canvas and Take a Screenshot, toDataURLHD(), toBlob(), toBlobHD()
toDataURLHD() method, toDataURLHD(), toBlob(), toBlobHD()
width property, The HTML5 Canvas Object, Resetting the Canvas Width and Height, Dynamically Resizing the Canvas, Dynamically Scaling the Canvas, Bouncing a Single Ball, Multiple Balls Bouncing with a Dynamically Resized Canvas, Multiple Balls Bouncing and Colliding
Canvas Pixel Manipulation API, The Canvas Pixel Manipulation API, Putting image data
<canvas tag>
bitmap drawing operations and, Copying from One Canvas to Another
<canvas> tag
about, The Basic HTML5 Page, <canvas>
<body> tag and, The HTML5 Canvas Object
<div> tag and, <div>, <canvas>
DOM support, The Document Object Model (DOM) and Canvas
in Geo Blaster Extended game, Creating a Dynamic Tile Sheet at Runtime
height attribute, Adding Canvas to the HTML Page
id attribute, Adding Canvas to the HTML Page
width attribute, Adding Canvas to the HTML Page
Canvas Text API (see Text API)
CanvasGradient object
about, Basic Text Display
addColorStop() method, Linear Gradients and Text, Animated Gradients
CanvasPattern object, Basic Text Display
CanvasPixelArray object, The Canvas Pixel Manipulation API
CanvasRenderingContext2D object
about, The 2D Context and the Current State
arc() method, context.arc(), Translating to the Canvas
arcTo() method, context.arcTo()
beginPath() method, Starting and Ending a Path, The static player ship (frame 1)
bezierCurveTo() method, Bezier Curves
clearRect() method, The Basic Rectangle Shape, Resetting the Canvas clearRect Function, Resetting the Canvas clearRect Function
clip() method, The 2D Context and the Current State, The Canvas State, The Canvas Clipping Region
closePath() method, Starting and Ending a Path, The static player ship (frame 1)
createLinearGradient() method, Linear horizontal gradients, Vertical gradients, Diagonal gradients, Linear Gradients and Text, Animated Gradients
createPattern() method, Filling Shapes with Patterns, Image Patterns and Text, Handling Gradients and Patterns in Text Arranger
createRadialGradient() method, Radial gradients, Radial Gradients and Text
current state and, The 2D Context and the Current State
drawImage() method, The drawScreen() Function, Image Basics, Displaying an Image on the Canvas with drawImage(), Simple Cell-Based Sprite Animation, Drawing the Image Window, Changing the ViewPort Property of the Image, Changing the Image Source Scale, Video is displayed like an image, Placing the buttons, Example 3: Create a Video Puzzle out of User-Captured Video, Play/Pause Push Button: Hit Test Point Revisited, Playing the game
fill() method, Applying a horizontal gradient to a complex shape
fillRect() method, The drawScreen() Function, The Basic Rectangle Shape
fillStyle property, The drawScreen() Function, The 2D Context and the Current State, The drawScreen() Function, The Canvas State, Setting Basic Fill Colors, Linear horizontal gradients, Basic Text Display, Font Color, Using the currentTime Property to Create Video Events
fillText() method, The drawScreen() Function, Basic Text Display, Handling Basic Text in Text Arranger, fillText and strokeText, fillText and strokeText, Using the currentTime Property to Create Video Events
font property, The drawScreen() Function, The 2D Context and the Current State, The drawScreen() Function, The Canvas State, Basic Text Display, fillText and strokeText, Setting the Text Font, Setting the font in the drawScreen() function
getImageData() method, Getting image data, Application Tile Stamper, Using Pixel Data to Detect Object Collisions, Creating a Dynamic Tile Sheet at Runtime, Creating a Dynamic Tile Sheet at Runtime
globalAlpha property, The 2D Context and the Current State, Some Necessary Properties, Alpha Transparency with the globalAlpha Property, Updating the globalAlpha Property for Text Display, The Canvas State, Compositing on the Canvas, Compositing on the Canvas, Global Alpha and Text, Global Shadows and Text, Alpha Fading the Player Ship
globalCompositeOperation property, The 2D Context and the Current State, The Canvas State, Compositing on the Canvas, Compositing on the Canvas
isPointInPath() method, Checking to See Whether a Point Is in the Current Path
lineCap property, The 2D Context and the Current State, The Canvas State, The Actual Drawing, Examples of More Advanced Line Drawing
lineJoin property, The 2D Context and the Current State, The Canvas State, context.lineJoin, Examples of More Advanced Line Drawing
lineTo() method, The Actual Drawing, The static player ship (frame 1)
lineWidth property, The 2D Context and the Current State, The Canvas State, lineWidth
measureText() method, Using measureText, Handling text baseline and alignment, Handling Gradients and Patterns in Text Arranger
miterLimit property, The 2D Context and the Current State, The Canvas State
moveTo() method, The Actual Drawing, The static player ship (frame 1)
putImageData() method, Putting image data, Creating a Dynamic Tile Sheet at Runtime, Creating a Dynamic Tile Sheet at Runtime
quadraticCurveTo() method, Bezier Curves
rect() method, The Canvas Clipping Region
restore() method, How Do We Save and Restore the Canvas State?, The Canvas Clipping Region, Canvas Transformation Basics, Applying Transformations to Game Graphics
rotate() method, The Canvas State, Lesson 1: Transformations are applied to shapes and paths drawn after the setTransform() or other transformation function is called, Combining Scale and Rotation Transformations, Canvas Video Transformations: Rotation, The Canvas Stack
save() method, How Do We Save and Restore the Canvas State?, The Canvas Clipping Region, Canvas Transformation Basics, Applying Transformations to Game Graphics
scale() method, Scale Transformations, Combining Scale and Rotation Transformations, Combining Scale and Rotation Transformations
setTransform() method, The Canvas State, Lesson 1: Transformations are applied to shapes and paths drawn after the setTransform() or other transformation function is called
shadowBlur property, The 2D Context and the Current State, The Canvas State, Creating Shadows on Canvas Shapes, Creating Shadows on Canvas Shapes, Global Shadows and Text
shadowColor property, The 2D Context and the Current State, The Canvas State, Creating Shadows on Canvas Shapes, Creating Shadows on Canvas Shapes, Global Shadows and Text
shadowOffsetX property, The 2D Context and the Current State, The Canvas State, Creating Shadows on Canvas Shapes, Creating Shadows on Canvas Shapes, Global Shadows and Text
shadowOffsetY property, The 2D Context and the Current State, The Canvas State, Creating Shadows on Canvas Shapes, Creating Shadows on Canvas Shapes, Global Shadows and Text
stroke() method, The Actual Drawing, The static player ship (frame 1)
strokeRect() method, The drawScreen() Function, The Basic Rectangle Shape, Applying a horizontal gradient to a stroke
strokeStyle property, The 2D Context and the Current State, The Canvas State, The Actual Drawing, strokeStyle, Setting Basic Fill Colors, Font Color, The static player ship (frame 1)
strokeText() method, fillText and strokeText, fillText and strokeText
textAlign property, The 2D Context and the Current State, The Canvas State, Horizontal alignment, Handling text baseline and alignment
textBaseline property, The drawScreen() Function, The 2D Context and the Current State, The drawScreen() Function, The Canvas State, Vertical alignment
translate() method, Lesson 2: We must “translate” the point of origin to the center of our shape to rotate it around its own center, Canvas Video Transformations: Rotation, Rotating the Player Ship from the Center
Cartesian coordinate system, The 2D Context and the Current State
Cascading Style Sheets (CSS)
about, Basic HTML We Will Use in This Book
future of text on Canvas, CSS Text
Text API and, Canvas Text and CSS
Catto, Erin, Box2D and the Canvas
Cecco, Raffaele, Conclusion
cell-based animation
advanced, Advanced Cell-Based Animation, Moving the Image Across the Canvas
simple, Simple Cell-Based Sprite Animation, Changing the Tile to Display
chat applications
about, The Basic Architecture of a Socket-Server Application
creating with ElectroServer, Creating a Chat Application with ElectroServer, Creating the chat functionality
testing, Testing the Application in Google Chrome
Christmas tree application
about, Creating a Simple Object Framework for the Canvas
application design, Application Design, DragAndDrop.html
creating, Creating the Drag-and-Drop Application
Windows 8 support, Windows 8 Apps and the HTML5 Canvas, Windows 8 Apps and the HTML5 Canvas
circles
collision detection for, Circle collision detection
update-collide-render cycle, Separating the code in drawScreen()
circular movement (see curve and circular movement)
clearing the Canvas, Methods to Clear the Canvas, Resetting the Canvas clearRect Function
click-and-drag volume slider, Click-and-Drag Volume Slider, Case Study in Audio: Space Raiders Game
coarse scrolling method
about, Coarse Scrolling vs. Fine Scrolling
full code example, Coarse Scrolling Full Code Example, Coarse Scrolling Full Code Example
codecs
audio, Theora + Vorbis = .ogg
video, HTML5 Video Support, Combining All Three
COLLADA 3D models, Google O3D
collision detection
about, Using Pixel Data to Detect Object Collisions, The Colliding Objects
audio player example, Setting Up the Audio Player Values
checking intersection between two objects, Checking for Intersection Between Two Objects, What’s Next?
Geo Blaster Basic game, Applying Collision Detection, Applying Collision Detection
Geo Blaster Extended game, The new boundingBoxCollide() algorithm, Rendering the particles, Rendering the particles
for multiple balls, Multiple Balls Bouncing and Colliding, Ball collisions in depth
Space Raiders game, Bounding box collision detection
testing for, How We Will Test Collisions
using pixel data, Using Pixel Data to Detect Object Collisions, What’s Next?
Video Puzzle example, Creating hit test point-style collision detection
color stops, Animated Gradients, The Future of Text on the Canvas
colors
gradient color stop and, Animated Gradients
linear gradients with, Text with Gradients and Patterns
setting basic fill, Setting Basic Fill Colors
setting for fonts, Font Color, Font Baseline and Alignment
setting for text, Basic Text Display
compositing operations, Compositing on the Canvas, Compositing on the Canvas
conservation of momentum law, Ball interactions in physics
console.log, debugging with, Debugging with console.log
context object (see CanvasRenderingContext2D object)
controls
audio, Creating a Canvas Audio Player, Case Study in Audio: Space Raiders Game
touch, Retro Blaster Touch, Checking out the game
video, Creating Video Controls on the Canvas, Animation Revisited: Moving Videos
CopperLicht library, CopperLicht
copying
images to another Canvas, Copying from One Canvas to Another, Copying from One Canvas to Another
parts of images to Canvas, Copying Part of an Image to the Canvas
Cordova PhoneGap, Beyond the Canvas
cosine, Moving on a Vector, Uniform Circular Motion
CraftyMind.com site, Capturing Video with JavaScript
Crockford, Douglas, JavaScript and Canvas
CSS (Cascading Style Sheets)
about, Basic HTML We Will Use in This Book
future of text on Canvas, CSS Text
Text API and, Canvas Text and CSS
cubic Bezier curves
creating loops, Creating a Cubic Bezier Curve Loop, Simple Gravity, Elasticity, and Friction
moving images along, Moving an Image, Creating a Cubic Bezier Curve Loop
moving objects along, Cubic Bezier Curve Movement
current bitmap, What’s Not Part of the State?
current path
about, Using Paths to Create Lines
checking if points in, Checking to See Whether a Point Is in the Current Path
saved states and, What’s Not Part of the State?
current transformation matrix, Starting and Ending a Path
curve and circular movement
about, Curve and Circular Movement
cubic Bezier curve loops, Creating a Cubic Bezier Curve Loop, Simple Gravity, Elasticity, and Friction
cubic Bezier curve movement, Cubic Bezier Curve Movement, Moving an Image
moving images, Moving an Image, Creating a Cubic Bezier Curve Loop
moving in simple spiral, Moving in a Simple Spiral, Cubic Bezier Curve Movement
uniform circular motion, Uniform Circular Motion, Moving in a Simple Spiral

D

Daleks game (see Micro Tank Maze game)
Date.getTime() method, Adding a Step Timer
debugging with console.log, Debugging with console.log
delta x (dx), Game Object Physics and Animation
delta y (dy), Game Object Physics and Animation
descenders (font), Vertical alignment
diagonal gradients, Diagonal gradients
display CSS attribute, Video must still be embedded in HTML
distance equation, Moving Between Two Points: The Distance of a Line
<div> tag
about, <div>
<canvas> tag and, <div>, <canvas>
display attribute, Video must still be embedded in HTML
id attribute, Preloading Video in JavaScript
left attribute, Canvas element
in Retro Blaster Touch game, Canvas element
style attribute, <div>
top attribute, Canvas element
<video> tag and, Video must still be embedded in HTML
<!doctype html> tag, <!doctype html>
document object
about, The Document Object Model (DOM) and Canvas
addEventListener() method, Communicating Between HTML Forms and the Canvas
appendChild() method, Dynamically Creating an Audio Element in JavaScript
body property, Dynamically Creating an Audio Element in JavaScript
createElement() method, Video must still be embedded in HTML, Dynamically Creating an Audio Element in JavaScript, Iteration #2: Creating Unlimited Dynamic Sound Objects
dir property, Horizontal alignment
getElementById() method, Using the document Object to Reference the Canvas Element in JavaScript, Exporting Canvas to an Image, Communicating Between HTML Forms and the Canvas, Dynamically Scaling the Canvas, Loading and Playing the Audio
Document Object Model (DOM)
about, The Document Object Model (DOM) and Canvas
Fallback DOM Concept, HTML5 Canvas and Accessibility: Sub Dom, So what does this mean for developers?
DOM (Document Object Model)
about, The Document Object Model (DOM) and Canvas
Fallback DOM Concept, HTML5 Canvas and Accessibility: Sub Dom, So what does this mean for developers?
DOM Exception 17, Image Patterns and Text
DOM Exception 18, The toDataURL() Method of the Canvas Object
drag-and drop-application
about, Creating a Simple Object Framework for the Canvas
application design, Application Design, DragAndDrop.html
creating, Creating the Drag-and-Drop Application
Windows 8 support, Windows 8 Apps and the HTML5 Canvas, Windows 8 Apps and the HTML5 Canvas
Drawing API (see drawing on Canvas)
drawing on Canvas
advanced path methods, Advanced Path Methods, The Canvas Clipping Region
basic file setup, The Basic File Setup for This Chapter
basic rectangle shape, The Basic Rectangle Shape
checking if points in current path, Checking to See Whether a Point Is in the Current Path
clearing the Canvas, Methods to Clear the Canvas, Resetting the Canvas clearRect Function
compositing operations, Compositing on the Canvas, Compositing on the Canvas
creating lines with paths, Using Paths to Create Lines, Examples of More Advanced Line Drawing
creating shadows on shapes, Creating Shadows on Canvas Shapes, Creating Shadows on Canvas Shapes
drawing arcs, Arcs
drawing balls, Drawing the ball
drawing focus ring, Drawing a Focus Ring
drawing states, The Canvas State
filling shapes with colors and gradients, Filling Objects with Colors and Gradients, Radial gradients
filling shapes with patterns, Filling Shapes with Patterns, Filling Shapes with Patterns
manipulating large images, Diving into Drawing Properties with a Large Image, Pan and Scale in the Same Operation
simple transformations, Simple Canvas Transformations, Combining Scale and Rotation Transformations
drawing states, The Canvas State
dx (delta x), Game Object Physics and Animation
dy (delta y), Game Object Physics and Animation

E

easing technique
about, Easing
easing in, Easing In (Taking Off), Box2D and the Canvas
easing out, Easing Out (Landing the Ship), Easing In (Taking Off)
elastic collisions, Ball interactions in physics
elasticity
about, Gravity with Bounce and Applied Simple Elasticity
bouncing effects and, Gravity with Bounce and Applied Simple Elasticity, Easing
ElectroServer 5
about, Multiplayer Applications with ElectroServer 5
additional applications, Further Explorations with ElectroServer
additional information, This Is Just the Tip of the Iceberg
admin tool for, The ElectroServer admin tool
basic application architecture, The Basic Architecture of an ElectroServer Application
creating chat applications, Creating a Chat Application with ElectroServer, Creating the chat functionality
establishing connection to, Establishing a connection to ElectroServer, Establishing a connection to ElectroServer
event support, Client, Establishing a connection to ElectroServer, Creating the chat functionality
installing, Installing ElectroServer, The JavaScript API
JavaScript API, The JavaScript API
socket-server application, The Basic Architecture of a Socket-Server Application
testing chat applications, Testing the Application in Google Chrome
em square (fonts), Vertical alignment
embedding video
altering width and height, Altering the Width and Height of the Video, Preloading Video in JavaScript
with controls, loop, and autoplay, Video with Controls, Loop, and Autoplay, Altering the Width and Height of the Video
plain-vanilla example, Plain-Vanilla Video Embed
ESObject object
about, Creating the chat functionality, Further Explorations with ElectroServer
setString() method, Creating the chat functionality
eval() function, fillText and strokeText
event handlers
for button presses, Listening for the button presses
creating for keyup event, Communicating Between HTML Forms and the Canvas
defining, Defining event handler functions in canvasApp()
setting for range controls, Dynamically Scaling the Canvas
setting in functions, Setting event handlers in canvasApp()
event listeners
adding, HTML5 Canvas “Hello World!”
BS Bingo game, Updating the mouse listening code
listening for button presses, Listening for the button presses, Animation Revisited: Moving Videos
Retro Blaster Touch game, New listener functions, New listener functions
Space Raiders game, Preloading all assets without global variables
event object
pageX property, Detecting mouse interactions and the canvas, Play/Pause Push Button: Hit Test Point Revisited
pageY property, Detecting mouse interactions and the canvas, Play/Pause Push Button: Hit Test Point Revisited
preventDefault() method, New listener functions
target property, Communicating Between HTML Forms and the Canvas, DragAndDrop.js
events
about, HTML5 Canvas “Hello World!”
audio, Important Audio Events, Loading and Playing the Audio, Loading the Button Assets
drag-and drop-application, EventDispatcher.js
ElectroServer 5 support, Client
ElectroServer support, Establishing a connection to ElectroServer, Creating the chat functionality
HTML5 continuing development, Video and the Canvas
keyboard, Controlling the Player Ship with the Keyboard, Giving the Player Ship a Maximum Velocity
mouse, Adding mouse events to the canvas, Detecting mouse interactions and the canvas, Mouse Events, Volume slider functionality, Mouse control, DragAndDrop.js
multiple events firing for mouse clicks, Preloading the buttons
occurring while video is playing, Video on the Canvas Examples
playing sounds, Why Sounds in Apps Are Different: Event Sounds
Space Raiders game, Mouse control
touch controls and, Touch Move Events, Checking out the game
video, Preloading Video in JavaScript, Video must still be embedded in HTML, Using the currentTime Property to Create Video Events, Canvas Video Transformations: Rotation
explosions
in Geo Blaster Basic game, Explosions and particles
in Geo Blaster Extended game, Geo Blaster Extended, Rendering the particles, Rendering the particles
in Micro Tank Maze game, The Explosions
exporting Canvas to an image, Exporting Canvas to an Image
extensions, Extensions

F

façades, Why Sounds in Apps Are Different: Event Sounds
Fallback DOM Concept, HTML5 Canvas and Accessibility: Sub Dom, So what does this mean for developers?
Fangs screen reader emulator, HTML5 Canvas and Accessibility: Sub Dom
Feldman, Ari, Displaying an Image on the Canvas with drawImage()
FFmpeg tool, Converting Video Formats
Fibonacci sequence, Moving in a Simple Spiral
fill colors, Setting Basic Fill Colors, Handling Gradients and Patterns in Text Arranger
fill patterns, Filling Shapes with Patterns, Filling Shapes with Patterns, Text with Gradients and Patterns
filling shapes
with colors and gradients, Filling Objects with Colors and Gradients, Radial gradients
with patterns, Filling Shapes with Patterns, Filling Shapes with Patterns
fine scrolling method
about, Coarse Scrolling vs. Fine Scrolling
full code example, Fine Scrolling Full Code Example, Fine Scrolling Full Code Example
row and column buffers, Fine Scrolling the Row and Column Buffers, The camera far down scrolled position
Flash comparison to Canvas, Canvas Compared to Flash
flip-book animation (see cell-based animation)
focus ring, drawing, Drawing a Focus Ring
font color, Font Color, Font Baseline and Alignment
font faces
creating necessary variables, Creating the necessary variables in the canvasApp() function
custom, Generic font faces
fallback, Generic font faces
generic, Generic font faces
handling in Text Arranger, Handling Font Size and Face in Text Arranger, Setting the font in the drawScreen() function
setting, Font Size, Face, Weight, and Style Basics
setting in functions, Setting the font in the drawScreen() function
font size
creating necessary variables, Creating the necessary variables in the canvasApp() function
handling in Text Arranger, Handling Font Size and Face in Text Arranger, Setting the font in the drawScreen() function
HTML5 range control and, Font size and HTML5 range control
setting, The drawScreen() Function, Font Size, Face, Weight, and Style Basics
setting in functions, Setting the font in the drawScreen() function
font styles
creating necessary variables, Creating the necessary variables in the canvasApp() function
setting, Font Size, Face, Weight, and Style Basics
supported, Available font styles
font weights
available, Available font weights
creating necessary variables, Creating the necessary variables in the canvasApp() function
setting, The drawScreen() Function, Font Size, Face, Weight, and Style Basics
font-face CSS attribute, Basic Text Display
@font-face CSS rule, Canvas Text and CSS, Generic font faces
font-size CSS attribute, Basic Text Display
font-style CSS attribute, Basic Text Display
font-weight CSS attribute, Basic Text Display
<footer> tag, The Basic HTML5 Page
for:next loops
Space Raiders game, Resetting the game, Playing the game
Video Puzzle example, Setting up the game, Creating hit test point-style collision detection
<form> tag, Exporting Canvas to an Image, Handling Basic Text in Text Arranger, Handling Basic Text in Text Arranger
formats
audio, Audio Formats, Audio Tag Properties, Functions, and Events, Finding the Supported Audio Format
video, HTML5 Video Support
FPS (frames per second)
in Geo Blaster Basic game, Game Timer Loop, The FrameRateCounter Object Prototype
in Geo Blaster Extended game, Adding a Step Timer
in Micro Tank Maze game, Turn-Based Game Flow and the State Machine
fragment shaders, Shaders
frame counters, Creating an Animation Frame Counter
frame ticks, Creating a Timer Loop, Animating a Transformed Image
FrameRateCounter object prototype
in Geo Blaster Basic game, The FrameRateCounter Object Prototype, Arrays of Logical Display Objects
in Geo Blaster Extended game, Adding a Step Timer
frames per second (FPS)
in Geo Blaster Basic game, Game Timer Loop, The FrameRateCounter Object Prototype
in Geo Blaster Extended game, Adding a Step Timer
in Micro Tank Maze game, Turn-Based Game Flow and the State Machine
friction
about, Simple Gravity, Simple Elasticity, and Simple Friction
ball bouncing with gravity, elasticity, and, Simple Gravity, Simple Elasticity, and Simple Friction, Easing
multiple balls bouncing with, Multiple Balls Bouncing with Friction, Multiple Balls Bouncing with Friction

G

game development, Canvas Games: Part I
(see also specific games)
about, Canvas Games: Part I, What Does Canvas Offer?
adding sound, Adding Sound, Playing sounds
adding step timers, Adding a Step Timer, Adding a Step Timer
animation and, Using Paths to Draw the Game’s Main Character, The Player Ship State Changes, Game Object Physics and Animation, Giving the Player Ship a Maximum Velocity
applying transformations to game graphics, Applying Transformations to Game Graphics, Game Object Physics and Animation
basic game framework, A Basic Game Framework, The FrameRateCounter Object Prototype
basic HTML5 file for, Our Basic Game HTML5 File, Our Basic Game HTML5 File
calculating tile source location, Refresher: Calculating the tile source location, Other new player attributes
creating dynamic tile sheets at runtime, Creating a Dynamic Tile Sheet at Runtime, Creating a Dynamic Tile Sheet at Runtime
drawing with paths, Game Graphics: Drawing with Paths, Animating on the Canvas
FrameRateCounter object prototype, The FrameRateCounter Object Prototype, Arrays of Logical Display Objects, Adding a Step Timer
game object physics and, Game Object Physics and Animation, Giving the Player Ship a Maximum Velocity
for game state machines, The Game State Machine, The Game State Machine
game timer loop, Game Timer Loop
graphic transformations, Game Graphic Transformations, Game Object Physics and Animation
handling state changes, The Player Ship State Changes, The Player Ship State Changes, The Canvas Stack, The Canvas Stack
path finding, Simple A* Path Finding on a Tile Grid, Tanks That Pass Through Walls?
pooling object instances, Pooling Object Instances, Adding a Step Timer
rendering game objects, Rendering the Other Game Objects, Rendering the particles, Rendering Logic Overview
scaling games, Scaling the Game for the Browser, Testing the Game on an Actual Device
scrolling tile-based worlds, Scrolling a Tile-Based World, Fine Scrolling Full Code Example
testing games on actual devices, Testing the Game on an Actual Device, Testing the Game on an Actual Device
tile movement logic overview, Simple Tile Movement Logic Overview, Simple Tile Movement Logic Overview
turn-based game flow, Turn-Based Game Flow and the State Machine, GAME_STATE_PLAYER_LOSE
update/render (repeat) cycle, The Update/Render (Repeat) Cycle, The Update/Render (Repeat) Cycle
GarageBand software, Example: Using All Three Formats
Geo Blaster Basic game
animation in, Using Paths to Draw the Game’s Main Character, The Player Ship State Changes, Game Object Physics and Animation, Giving the Player Ship a Maximum Velocity
applying collision detection, Applying Collision Detection, Applying Collision Detection
applying transformations to game graphics, Applying Transformations to Game Graphics, Game Object Physics and Animation
awarding player extra ships, Awarding the Player Extra Ships
basic design, Our Game’s Design
basic structure, Putting It All Together, The Player Object
controlling ship with keyboard, Controlling the Player Ship with the Keyboard, Giving the Player Ship a Maximum Velocity
full source code, The Geo Blaster Basic Full Source
game algorithms, Geo Blaster Game Algorithms, Applying Collision Detection
game objects physics, Game Object Physics and Animation, Giving the Player Ship a Maximum Velocity
game timer loop, Game Timer Loop
giving ship maximum velocity, Giving the Player Ship a Maximum Velocity
graphic transformations, Game Graphic Transformations, Game Object Physics and Animation
level and game end, Level and Game End
level knobs in, Level Knobs
player object, The Player Object
Rock prototype object, Rock Object Prototype, Simple A* Path Finding on a Tile Grid
ship movement in, How Our Player Ship Will Move, Redrawing the player ship to start at angle 0
state changes in, The Player Ship State Changes, The Player Ship State Changes, The Canvas Stack, The Canvas Stack, Game application states
Geo Blaster Extended game
about, Geo Blaster Extended
adding sound, Adding Sound, Playing sounds
adding step timers, Adding a Step Timer, Adding a Step Timer
animation in, Rendering the saucers, Creating a Dynamic Tile Sheet at Runtime, Creating a Dynamic Tile Sheet at Runtime
full source code, Adding a Step Timer, Creating a Dynamic Tile Sheet at Runtime
pooling object instances, Pooling Object Instances, Adding a Step Timer
rendering other game objects, Rendering the Other Game Objects, Rendering the particles
tile sheets in, Geo Blaster Tile Sheet, The new boundingBoxCollide() algorithm, Creating a Dynamic Tile Sheet at Runtime, Creating a Dynamic Tile Sheet at Runtime
GLGE library, GLGE
Google O3D library, Google O3D
gradients
animated, Animated Gradients, The Future of Text on the Canvas
filling shapes with, Filling Shapes with Gradients, Radial gradients
linear, Linear gradients, Diagonal gradients, Text with Gradients and Patterns, Linear Gradients and Text, Handling Gradients and Patterns in Text Arranger
radial, Radial gradients, Radial gradients, Text with Gradients and Patterns, Radial Gradients and Text, Handling Gradients and Patterns in Text Arranger
Text Arranger handling, Handling Gradients and Patterns in Text Arranger, Width, Height, Scale, and toDataURL() Revisited
gravity
about, Simple Gravity, Simple Gravity with a Bounce
bouncing effects and, Simple Gravity with a Bounce, Easing
grid-based path finding (see A* path finding)
Grinstead, Brian, What Is A*?
Guess The Letter example
about, Another Example: Guess The Letter, How the Game Works
drawScreen() function, The drawScreen() Function
eventKeyPressed() function, The eventKeyPressed() Function, The eventKeyPressed() Function
exporting Canvas to an image, Exporting Canvas to an Image
final game code, The Final Game Code
initGame() function, The initGame() Function
variables used in, The “Guess The Letter” Game Variables

H

H.264 video standard, H.264 + $$$ = .mp4
HandBrake tool, Converting Video Formats
<head> tag, The Basic HTML5 Page, Where Does JavaScript Go and Why?
<header> tag, The Basic HTML5 Page
Hello World application
about, HTML5 Canvas “Hello World!”
adding <canvas> tag to HTML page, Adding Canvas to the HTML Page
animated edition, Hello World Animated Edition, Drawing the Text
animation loop, Animation Loop, Drawing the Text
Box2D and, Box2D Hello World
canvasSupport() function, Testing to See Whether the Browser Supports Canvas
determining browser support, Testing to See Whether the Browser Supports Canvas
with <div> tag, <div>
drawScreen() function, The drawScreen() Function, The drawScreen() Function
encapsulating code for Canvas, Encapsulating Your JavaScript Code for Canvas
referencing <canvas> tag with document object, Using the document Object to Reference the Canvas Element in JavaScript
retrieving 2D context, Retrieving the 2D Context
Hit Testing proposal, Hit Testing Proposal
horizontal alignment of text, Horizontal alignment
horizontal gradients, Linear horizontal gradients, Applying a horizontal gradient to a complex shape
HTML (HyperText Markup Language), Introduction to HTML5 Canvas, Basic HTML We Will Use in This Book, <canvas>
HTML forms, Communicating Between HTML Forms and the Canvas, Creating the chat functionality
<html lang=“en”> tag, <html lang=“en”>
HTML5
about, What Is HTML5?
basic page, The Basic HTML5 Page, A Simple HTML5 Page
upcoming enhancements, What’s Next in HTML5.1 and Canvas Level 2?
HTML5 Canvas
about, Introduction to HTML5 Canvas
accessibility for, HTML5 Canvas and Accessibility: Sub Dom, So what does this mean for developers?
creating object framework, Creating a Simple Object Framework for the Canvas, DragAndDrop.html
debugging with console.log, Debugging with console.log
DOM support, The Document Object Model (DOM) and Canvas
Guess The Letter example, Another Example: Guess The Letter, The Final Game Code
Hello World application, HTML5 Canvas “Hello World!”, The drawScreen() Function, Hello World Animated Edition, Drawing the Text
JavaScript support, JavaScript and Canvas
upcoming enhancements, What’s Next in HTML5.1 and Canvas Level 2?
Windows 8 apps and, Windows 8 Apps and the HTML5 Canvas, Windows 8 Apps and the HTML5 Canvas
HTML5 Canvas Drawing API (see drawing on Canvas)
HTML5 Canvas Image API (see images on Canvas)
HTML5 Canvas Text API (see Text API)
HTMLAudioElement object
about, Working with Audio, Audio Tag Properties, Functions, and Events
additional information, Important Audio Properties
audio formats supported, Finding the Supported Audio Format
autoplay property, Important Audio Properties
canplaythrough event, Important Audio Events, Loading and Playing the Audio, Dynamically Creating an Audio Element in JavaScript
canPlayType() method, Audio Functions, Displaying Attributes on the Canvas, Finding the Supported Audio Format
controls property, Important Audio Properties
creating audio player, Creating a Canvas Audio Player, Case Study in Audio: Space Raiders Game
currentSrc property, Important Audio Properties
currentTime property, Important Audio Properties, Creating Custom User Controls on the Canvas, Sliding Play Indicator
displaying attributes on Canvas, Displaying Attributes on the Canvas, Playing a Sound with No Audio Tag
duration property, Important Audio Properties, Creating Custom User Controls on the Canvas, Sliding Play Indicator
ended event, Important Audio Events
ended property, Important Audio Properties, Iteration #3: Creating a Sound Pool, Iteration #4: Reusing Preloaded Sounds
load() method, Audio Functions
loop property, Important Audio Properties, Loop/No Loop Toggle Button, Iteration #2: Creating Unlimited Dynamic Sound Objects
muted property, Important Audio Properties
pause() method, Audio Functions, Sliding Play Indicator, Play/Pause Push Button: Hit Test Point Revisited
paused property, Important Audio Properties, Play/Pause Push Button: Hit Test Point Revisited
play() method, Audio Functions, Playing the Sound, Play/Pause Push Button: Hit Test Point Revisited, Preloading all assets without global variables, Mouse control, Iteration #1: Playing Sounds Using a Single Object, Iteration #2: Creating Unlimited Dynamic Sound Objects, Iteration #3: Creating a Sound Pool
playing event, Important Audio Events
playing sound without <audio> tag, Playing a Sound with No Audio Tag, Creating a Canvas Audio Player
preload property, Important Audio Properties, Loading and Playing the Audio
progress event, Important Audio Events, Loading and Playing the Audio
setAttribute() method, Dynamically Creating an Audio Element in JavaScript
Space Raiders game, Initializing the game: no global variables
src property, Dynamically Creating an Audio Element in JavaScript, Preloading all assets without global variables, Iteration #2: Creating Unlimited Dynamic Sound Objects
volume property, Important Audio Properties, Volume slider variables, Iteration #2: Creating Unlimited Dynamic Sound Objects
volumechange event, Important Audio Events
HTMLMediaElement interface
HTMLAudioElement object and, Audio Tag Properties, Functions, and Events
HTMLVideoElement object and, Basic HTML5 Video Implementation
HTMLVideoElement interface
autoplay property, Basic HTML5 Video Implementation
loop property, Basic HTML5 Video Implementation
poster property, Basic HTML5 Video Implementation
src property, Basic HTML5 Video Implementation
volume property, Basic HTML5 Video Implementation
HTMLVideoElement object
about, Basic HTML5 Video Implementation
additional information, Video on the Canvas Examples
autoplay property, HTML5 Video Properties
buffered property, Preloading Video in JavaScript
canplaythrough event, Preloading Video in JavaScript, Preloading Video in JavaScript, Video must still be embedded in HTML
canPlayType() method, Video must still be embedded in HTML
controls property, HTML5 Video Properties
currentTime property, Basic HTML5 Video Implementation, HTML5 Video Properties, Using the currentTime Property to Create Video Events, Canvas Video Transformations: Rotation
duration property, Basic HTML5 Video Implementation, Preloading Video in JavaScript, HTML5 Video Properties
ended property, Basic HTML5 Video Implementation
loop property, HTML5 Video Properties
muted property, Basic HTML5 Video Implementation, HTML5 Video Properties
pause() method, Basic HTML5 Video Implementation
paused property, Basic HTML5 Video Implementation, Placing the buttons
play() method, Basic HTML5 Video Implementation, Preloading Video in JavaScript, HTML5 Video Properties, Example 2: Put Video on the Canvas and Take a Screenshot
progress event, Preloading Video in JavaScript
screenshot of video example, Example 2: Put Video on the Canvas and Take a Screenshot
src property, Video must still be embedded in HTML
volume property, HTML5 Video Properties
HyperText Markup Language (HTML), Introduction to HTML5 Canvas, Basic HTML We Will Use in This Book

I

if:then statement, Creating hit test point-style collision detection
Image object
as fill pattern, Image Patterns and Text
as fill pattern, Text with Gradients and Patterns
filling shapes with patterns, Filling Shapes with Patterns, Filling Shapes with Patterns
height property, Mouse control
onload event, The drawScreen() Function, Loading the Button Assets
src property, The drawScreen() Function, Image Basics, Loading the Button Assets
width property, Mouse control
image windows
changing source scale settings, Changing the Image Source Scale
changing viewport settings, Changing the ViewPort Property of the Image
creating, Creating a Window for the Image
drawing, Drawing the Image Window, Drawing the Image Window
panning in, Panning to a Spot on the Source Image, Pan and Scale in the Same Operation
scaling operations in, Pan and Scale in the Same Operation, Pan and Scale in the Same Operation
ImageData object
about, ImageData attributes, Putting image data
checking for intersections between objects, Checking for Intersection Between Two Objects
Time Stamper application and, Application Tile Stamper
images on Canvas
about, Images on the Canvas
advanced cell-based animation, Advanced Cell-Based Animation, Moving the Image Across the Canvas
applying rotation transformations to, Applying Rotation Transformations to an Image, Animating a Transformed Image
basic file setup, The Basic File Setup for This Chapter
copying to another Canvas, Copying from One Canvas to Another, Copying from One Canvas to Another
detecting object collisions, Using Pixel Data to Detect Object Collisions, What’s Next?
displaying Guess The Letter, How the Game Works, The drawScreen() Function
displaying Hello World, Encapsulating Your JavaScript Code for Canvas, The drawScreen() Function, The drawScreen() Function, Animation Loop, Drawing the Text
drawing properties, Diving into Drawing Properties with a Large Image, Pan and Scale in the Same Operation
exporting Canvas to images, Exporting Canvas to an Image
image basics, Image Basics, Copying Part of an Image to the Canvas
moving, Moving the Image Across the Canvas, Moving the Image Across the Canvas, Moving an Image, Creating a Cubic Bezier Curve Loop
No Tanks! game, Creating a Grid of Tiles, Displaying the map on the canvas
pixel manipulation, Pixel Manipulation, Copying from One Canvas to Another
simple cell-based animation, Simple Cell-Based Sprite Animation, Changing the Tile to Display
source scale settings, Changing the Image Source Scale
Tile Stamper application, Application Tile Stamper, Copying from One Canvas to Another
viewport settings, Changing the ViewPort Property of the Image
immediate mode, Introduction to HTML5 Canvas, The 2D Context and the Current State, Animated Gradients
incidence, angle of, Bouncing Off Walls
<input> tag
placeholder attribute, Handling Basic Text in Text Arranger
range control type, Font size and HTML5 range control
value attribute, Handling Basic Text in Text Arranger
intersection between objects, Checking for Intersection Between Two Objects, What’s Next?
iOS devices
adding meta-tags for, Adding meta-tags for iOS devices
audio and, Example: Using All Three Formats, Web Audio API
designing applications for, The TextButton.js file
Retro Blaster Touch game on, Retro Blaster Touch, Checking out the game
scaling BS Bingo game for, Scaling the Game for the Browser, Testing the Game on an Actual Device
testing BS Bingo game on, Testing the Game on an Actual Device, Testing the Game on an Actual Device
video and, Plain-Vanilla Video Embed

J

JavaScript language
Canvas support, JavaScript and Canvas
capturing video with, Capturing Video with JavaScript, Video and Mobile
DOM support, The Document Object Model (DOM) and Canvas
dynamically creating audio elements, Dynamically Creating an Audio Element in JavaScript
ElectroServer API, The JavaScript API
placement of functions, The Basic HTML5 Page
preloading video in, Preloading Video in JavaScript, Video and the Canvas
rotating cube application, JavaScript libraries
WebGL libraries, WebGL JavaScript Libraries, Three.js
jQTouch framework, Beyond the Canvas
jQuery Mobile Framework, Beyond the Canvas
JSColor color picker, Font Color, Global Shadows and Text, Handling Gradients and Patterns in Text Arranger

M

Makar, Jobe, Ball interactions in physics, Ball collisions in depth, This Is Just the Tip of the Iceberg
mass (physics), Ball interactions in physics
Math object
atan2 function, Logic for updating the tank node and position
cos function, Moving on a Vector
floor function, Adding mouse events to the canvas
max function, Checking for Intersection Between Two Objects
min function, Checking for Intersection Between Two Objects
PI function, Moving on a Vector
random function, Translating to the Canvas
sin function, Moving on a Vector
maze-chase games (see Micro Tank Maze game)
<meta charset=“UTF-8”> tag, <meta charset=“UTF-8”>
meta-tags
for iOS devices, Adding meta-tags for iOS devices
for Retro Blaster Touch game, Meta-tags
Micro Tank Maze game
about, A Simple Tile-Based Game, Game strategy
enemy object in, The Enemy
explosions in, The Explosions
full source code, Micro Tank Maze Complete Game Code
game playfield, The Playfield
goal tile in, The Goal
player object in, The Player
rendering logic overview, Rendering Logic Overview
simple rules overview, Simple Homegrown AI Overview
state machine in, Turn-Based Game Flow and the State Machine, GAME_STATE_PLAYER_LOSE
tile movement logic overview, Simple Tile Movement Logic Overview, Simple Tile Movement Logic Overview
tile sheets in, The Tile Sheet for Our Game, The Tile Sheet for Our Game
turn-based game flow in, Turn-Based Game Flow and the State Machine, GAME_STATE_PLAYER_LOSE
MIME types, Finding the Supported Audio Format
Miro Video Converter, Converting Video Formats
mobile devices
audio and, Example: Using All Three Formats, Web Audio API
designing applications for, The TextButton.js file
Retro Blaster Touch game on, Retro Blaster Touch, Checking out the game
scaling BS Bingo game for, Scaling the Game for the Browser, Testing the Game on an Actual Device
testing BS Bingo game on, Testing the Game on an Actual Device, Testing the Game on an Actual Device
video and, Plain-Vanilla Video Embed, Video and Mobile
Modernizr library
about, JavaScript libraries
testing with, Testing to See Whether the Browser Supports Canvas, Finding the Supported Audio Format, Testing for WebGL support with Modernizr
webgl static constant, Testing for WebGL support with Modernizr
modulo (%) operator, Choosing the Tile to Display, Refresher: Calculating the tile source location
mouse events
adding to Canvas, Adding mouse events to the canvas
audio player example, Mouse Events, Volume slider functionality
detecting interactions, Detecting mouse interactions and the canvas
drag-and drop-application, DragAndDrop.js
Space Raiders game, Mouse control
movement (see animation)
.mp3 file extension, Supported Formats
mp3 file extension, Finding the Supported Audio Format
.mp4 file extension, H.264 + $$$ = .mp4
MTS units, Units in Box2dWeb, Translating to the Canvas
multiplayer applications (see ElectroServer 5)

O

O3D library (Google), Google O3D
.oga file extension, Theora + Vorbis = .ogg
.ogg file extension, Theora + Vorbis = .ogg, Supported Formats, Finding the Supported Audio Format
.ogv file extension, Theora + Vorbis = .ogg
Open Web Platform, What Is HTML5?

P

Pac-Man game, A Simple Tile-Based Game
panning in image windows, Panning to a Spot on the Source Image, Pan and Scale in the Same Operation
particles
in Geo Blaster Basic game, Explosions and particles
in Geo Blaster Extended game, Geo Blaster Extended, Rendering the particles, Rendering the particles
path finding (see A* path finding)
paths
about, Drawing on the Canvas, Using Paths to Create Lines
advanced methods for, Advanced Path Methods, The Canvas Clipping Region
checking if points in, Checking to See Whether a Point Is in the Current Path
creating lines with, Using Paths to Create Lines, Examples of More Advanced Line Drawing
current, What’s Not Part of the State?, Using Paths to Create Lines
drawing during game development, Game Graphics: Drawing with Paths, Animating on the Canvas
finding a point on the current, Checking to See Whether a Point Is in the Current Path
moving characters along, Moving a Game Character Along the A* Path, Tanks That Pass Through Walls?
of points, Tracing movement: A path of points, Moving on a Vector
subpaths and, Starting and Ending a Path
patterns
filling shapes with, Filling Shapes with Patterns, Filling Shapes with Patterns
Image objects as, Text with Gradients and Patterns, Image Patterns and Text
Text Arranger handling, Handling Gradients and Patterns in Text Arranger, Width, Height, Scale, and toDataURL() Revisited
with video element, Image Patterns and Text
Penner, Robert, Box2D and the Canvas
percentage of gradient color stop, Animated Gradients
PhoneGap (Cordova), Beyond the Canvas
physics
in animation, Game Object Physics and Animation, Giving the Player Ship a Maximum Velocity
ball interactions in, Ball interactions in physics
in Geo Blaster Basic game, Game Object Physics and Animation, Giving the Player Ship a Maximum Velocity
simple forces of nature, Simple Gravity, Elasticity, and Friction, Easing
Pilgrim, Mark, Conclusion
pixel manipulation
about, Pixel Manipulation, Copying from One Canvas to Another
detecting object collisions, Using Pixel Data to Detect Object Collisions, What’s Next?
play/pause button
audio example, Play/Pause Push Button: Hit Test Point Revisited, Play/Pause Push Button: Hit Test Point Revisited
video example, Creating video buttons, Animation Revisited: Moving Videos
plug-ins, Extensions
points
calculating distance between, Moving Between Two Points: The Distance of a Line, Moving on a Vector, Easing Out (Landing the Ship)
checking if in current path, Checking to See Whether a Point Is in the Current Path
preloading
images, Preloading Images
Space Raiders game assets, Preloading all assets without global variables, Preloading all assets without global variables
video buttons, Preloading the buttons
video in JavaScript, Preloading Video in JavaScript, Video and the Canvas
puzzle example (see Video Puzzle example)
Pythagorean theorem, Moving Between Two Points: The Distance of a Line

Q

quadratic Bezier curves, Creating a Cubic Bezier Curve Loop

R

radial gradients
about, Radial gradients, Radial gradients
with colors, Text with Gradients and Patterns
text and, Radial Gradients and Text
Text Arranger example, Handling Gradients and Patterns in Text Arranger
radians, Moving on a Vector
(see also bouncing effects)
converting angles to, Moving on a Vector
finding angles in, Step 3: Code the transform algorithm, Redrawing the player ship to start at angle 0
Rains, Lyle, Our Game’s Design
range controls
adding, Dynamically Resizing the Canvas
dynamically resizing Canvas, Multiple Balls Bouncing with a Dynamically Resized Canvas, Multiple Balls Bouncing and Colliding
setting event handlers for, Dynamically Scaling the Canvas
setting font size, Font size and HTML5 range control
setting video size, Altering the Width and Height of the Video
updating shadow settings, Global Shadows and Text
rectangles
drawing basic, The Basic Rectangle Shape
rotation and scale of, Combining Scale and Rotation Transformations
reflection, angle of, Bouncing Off Walls
repeat pattern, Filling Shapes with Patterns, Filling Shapes with Patterns
resetting
Canvas width and height, Resetting the Canvas Width and Height
Space Raiders game, Resetting the game
transformation matrix, Step 2: Reset the transformation matrix to identity
resizing
Canvas dynamically, Dynamically Resizing the Canvas, Dynamically Scaling the Canvas, Multiple Balls Bouncing with a Dynamically Resized Canvas, Multiple Balls Bouncing and Colliding
images painted to Canvas, Resizing an Image Painted to the Canvas
retained mode, Introduction to HTML5 Canvas, The 2D Context and the Current State
Retro Blaster Touch game
about, Retro Blaster Touch, Retro Blaster Touch
full source code, Mobilizing Retro Blaster Touch
jumping to full screen, Jumping to Full Screen, Style sheets
meta-tags for, Meta-tags
tile sheets in, Retro Blaster Touch
touch move events, Touch Move Events, Checking out the game
rgb() method, Setting Basic Fill Colors
rgba() method, Setting Basic Fill Colors
Rock prototype object, Rock Object Prototype, Simple A* Path Finding on a Tile Grid
rotating cube application
building, What Does a WebGL Application Look Like?, Animating the cube
full code listing, Code from Chapter 11, Further Explorations with WebGL
rotation transformations
about, Rotation and Translation Transformations, Combining Scale and Rotation Transformations
applying to images, Applying Rotation Transformations to an Image, Animating a Transformed Image
Geo Blaster Basic game, The Canvas Stack, Alpha Fading the Player Ship
Geo Blaster Extended game, Creating a Dynamic Tile Sheet at Runtime
video example, Canvas Video Transformations: Rotation, Canvas Video Puzzle

S

scale transformations, Scale Transformations, Combining Scale and Rotation Transformations
scaling BS Bingo game, Scaling the Game for the Browser, Testing the Game on an Actual Device
scaling Canvas
drawing large images, Diving into Drawing Properties with a Large Image, Pan and Scale in the Same Operation
dynamically, Dynamically Scaling the Canvas
panning combined with, Pan and Scale in the Same Operation, Pan and Scale in the Same Operation
SceneJS library, SceneJS
scenes, Shaders
screenshots for videos, Example 2: Put Video on the Canvas and Take a Screenshot, Example 2: Put Video on the Canvas and Take a Screenshot
<script> tag
FrameRateCounter object prototype and, The FrameRateCounter Object Prototype
src attribute, The FrameRateCounter Object Prototype
scrolling tile-based worlds
about, Scrolling a Tile-Based World
arrays for, Scrolling a Tile-Based World, Second, a Two-Dimensional Array to Describe Our Game World
building, Third, Paint the Tile-Based World to the Canvas
camera object for, The Camera Object, Fine Scrolling the Row and Column Buffers, The camera far down scrolled position
coarse scrolling in, Coarse Scrolling vs. Fine Scrolling, Coarse Scrolling Full Code Example, Coarse Scrolling Full Code Example
fine scrolling in, Coarse Scrolling vs. Fine Scrolling, Fine Scrolling the Row and Column Buffers, The camera far down scrolled position, Fine Scrolling Full Code Example, Fine Scrolling Full Code Example
tile sheets for, First, a Tile Sheet That Contains the Tiles We Want to Paint to the Screen
world object for, The World Object
SECURITY_ERR error, The toDataURL() Method of the Canvas Object
Seeman, Glenn, What Is A*?
shaders
defined, Shaders
fragment, Shaders
vertex, Shaders
shadows, creating on shapes, Creating Shadows on Canvas Shapes, Creating Shadows on Canvas Shapes
Shape object, What Does Canvas Offer?
shapes
applying transformations to, Lesson 1: Transformations are applied to shapes and paths drawn after the setTransform() or other transformation function is called
creating shadows on, Creating Shadows on Canvas Shapes, Creating Shadows on Canvas Shapes
filling with colors and gradients, Filling Objects with Colors and Gradients, Radial gradients
filling with patterns, Filling Shapes with Patterns, Filling Shapes with Patterns
finding center of, Combining Scale and Rotation Transformations
translating point of origin, Lesson 2: We must “translate” the point of origin to the center of our shape to rotate it around its own center, Lesson 2: We must “translate” the point of origin to the center of our shape to rotate it around its own center
shooting balls at boxes game
adding interactivity, Adding Interactivity
creating boxes, Creating the Boxes, Rendering the Boxes, Creating Boxes
handling balls, Handling the Balls, Box2D Further Reading
rendering boxes, Rendering the Boxes
sine, Moving on a Vector, Uniform Circular Motion
sliding play indicator, Sliding Play Indicator
SmartFox server, This Is Just the Tip of the Iceberg
socket-server application, The Basic Architecture of a Socket-Server Application
Sonic Foundry Acid software, Example: Using All Three Formats
sound management (see audio)
sounds (see audio)
<source> tag, Plain-Vanilla Video Embed
Space Raiders game
about, Case Study in Audio: Space Raiders Game
bounding box collision detection, Bounding box collision detection
creating sound pool, Iteration #3: Creating a Sound Pool, Iteration #4: Reusing Preloaded Sounds
creating unlimited dynamic sound objects, Iteration #2: Creating Unlimited Dynamic Sound Objects, Iteration #2: Creating Unlimited Dynamic Sound Objects
event listeners, Preloading all assets without global variables
event sounds, Why Sounds in Apps Are Different: Event Sounds
improving, Other stuff you could do to improve the game
initializing, Initializing the game: no global variables, Initializing the game: no global variables
mouse control, Mouse control
playing, Playing the game, Playing the game
playing sounds using single object, Iteration #1: Playing Sounds Using a Single Object
preloading assets, Preloading all assets without global variables, Preloading all assets without global variables
resetting, Resetting the game
reusing preloaded sounds, Iteration #4: Reusing Preloaded Sounds, Web Audio API
state machine, State machine, Preloading all assets without global variables
structure of, Space Raiders Game Structure, Playing the game
Web Audio API and, Space Raiders with the Web Audio API Applied, Space Raiders with the Web Audio API Applied
spaceship example
copying parts of images, Copying Part of an Image to the Canvas, Copying Part of an Image to the Canvas
displaying images, Displaying an Image on the Canvas with drawImage(), Displaying an Image on the Canvas with drawImage()
resizing images, Resizing an Image Painted to the Canvas
SpiderGL library, SpiderGL
spiral, moving in, Moving in a Simple Spiral, Cubic Bezier Curve Movement
sprite sheets (see tile sheets)
SpriteLib library, Displaying an Image on the Canvas with drawImage(), Advanced Cell-Based Animation
states and state machines
about, State machine
basic game framework for, The Game State Machine, The Game State Machine
current state, The 2D Context and the Current State
drawing states, The Canvas State
Geo Blaster Basic game, The Player Ship State Changes, The Player Ship State Changes, The Canvas Stack, The Canvas Stack, Game application states
Micro Tank Maze game, Turn-Based Game Flow and the State Machine, GAME_STATE_PLAYER_LOSE
saving and restoring, How Do We Save and Restore the Canvas State?
Space Raiders game, State machine, Preloading all assets without global variables
step timers, Adding a Step Timer, Adding a Step Timer
straight lines (see lines)
<style> tag, Style sheets
sub dom concept, HTML5 Canvas and Accessibility: Sub Dom, So what does this mean for developers?
submarine patents, Theora + Vorbis = .ogg
subpaths, Starting and Ending a Path
Super Mario Brothers game, Coarse Scrolling vs. Fine Scrolling
SUPER tool, Converting Video Formats
switch statements, State machine

T

tank games (see Micro Tank Maze game; No Tanks! game)
testing
BS Bingo game, Testing the Game on an Actual Device, Testing the Game on an Actual Device
chat applications, Testing the Application in Google Chrome
for collisions, How We Will Test Collisions
with Modernizr library, Testing to See Whether the Browser Supports Canvas, Finding the Supported Audio Format, Testing for WebGL support with Modernizr
Video Puzzle example, Testing the game, Creating Video Controls on the Canvas
WebGL, How Does One Test WebGL?, Testing for WebGL support with Modernizr
text, Image Patterns and Text
(see also Text Arranger application)
accessibility of, Making Text Accessible
aligning, Font Baseline and Alignment, Text Arranger Version 2.0
Canvas context and, Text and the Canvas Context, Text with Gradients and Patterns
CSS future considerations, CSS Text
displaying, Basic Text Display
font settings for, Setting the Text Font, Text Arranger Version 2.0
handling in Text Arranger, Handling Basic Text in Text Arranger
image patterns and, Image Patterns and Text
linear gradients and, Linear Gradients and Text
radial gradients and, Radial Gradients and Text
setting colors for, Basic Text Display
Text API
about, The HTML5 Canvas Text API
animated gradients, Animated Gradients, The Future of Text on the Canvas
context properties and, Text and the Canvas Context, Global Shadows and Text
CSS and, Canvas Text and CSS
displaying basic text, Displaying Basic Text, fillText and strokeText
dynamically resizing the Canvas, Dynamically Resizing the Canvas, Dynamically Resizing the Canvas
dynamically scaling the Canvas, Dynamically Scaling the Canvas
future considerations, The Future of Text on the Canvas
gradients and patterns, Text with Gradients and Patterns, Handling Gradients and Patterns in Text Arranger
outputting image data, The toDataURL() Method of the Canvas Object
setting text font, Setting the Text Font, Text Arranger Version 2.0
Text Arranger example, Handling Basic Text in Text Arranger, Final Version of Text Arranger, Animated Gradients
Text Arranger application
about, The HTML5 Canvas Text API
final version, Final Version of Text Arranger, Animated Gradients
handling basic text in, Handling Basic Text in Text Arranger
handling font faces in, Handling Font Size and Face in Text Arranger, Setting the font in the drawScreen() function
handling font size in, Handling Font Size and Face in Text Arranger, Setting the font in the drawScreen() function
handling gradients in, Handling Gradients and Patterns in Text Arranger, Width, Height, Scale, and toDataURL() Revisited
handling patterns in, Handling Gradients and Patterns in Text Arranger, Width, Height, Scale, and toDataURL() Revisited
version 2, Text Arranger Version 2.0
TextButton object prototype, The Application Code
TextMetrics object
about, Using measureText
height property, What about the height of the text?
upcoming enhancements, Canvas Level-2
width property, Using measureText
texture sheets (see tile sheets)
Theora video codec, Theora + Vorbis = .ogg
Thomas, Giles, What Does a WebGL Application Look Like?
three.js library, Three.js
3D with WebGL (see WebGL)
thrust force, Thrusting in the rotated direction
tile maps, Creating a Tile Map with Tiled
(see also A* path finding)
creating, Creating a Tile Map with Tiled, Creating a Tile Map with Tiled
defining, Defining a Tile Map
displaying on Canvas, Displaying the Map on the Canvas, Displaying the map on the canvas
poorly designed, Tanks That Pass Through Walls?, Tanks That Pass Through Walls?
tile sheets
about, Copying Part of an Image to the Canvas
advanced cell-based animation, Advanced Cell-Based Animation, Moving the Image Across the Canvas
applying rotation transformations to images, Applying Rotation Transformations to an Image, Animating a Transformed Image
examining, Examining the Tile Sheet
in Geo Blaster Extended game, Geo Blaster Tile Sheet, The new boundingBoxCollide() algorithm, Loading in sounds and tile sheet assets, Loading in sounds and tile sheet assets, Creating a Dynamic Tile Sheet at Runtime, Creating a Dynamic Tile Sheet at Runtime
in Micro Tank Maze game, The Tile Sheet for Our Game, The Tile Sheet for Our Game
No Tanks! game, Creating a Grid of Tiles, Displaying the map on the canvas
in Retro Blaster Touch game, Retro Blaster Touch
scrolling tile-based worlds, First, a Tile Sheet That Contains the Tiles We Want to Paint to the Screen
simple cell-based animation, Simple Cell-Based Sprite Animation, Changing the Tile to Display
video buttons, Creating video buttons
Tile Stamper application, Application Tile Stamper, Copying from One Canvas to Another
tile-based games (see scrolling tile-based worlds; specific games)
Tiled tile map editor, Creating a Tile Map with Tiled, Creating a Tile Map with Tiled
timer loops
drag-and drop-application, DragAndDrop.js
Geo Blaster Basic game, Game Timer Loop
simple cell-based animation, Creating a Timer Loop
timer ticks, Creating a Timer Loop
<title> tag, <title>...</title>
toggle button (audio player), Loop/No Loop Toggle Button
touch controls
about, Retro Blaster Touch
jumping to full screen, Jumping to Full Screen, Style sheets
touch move events, Touch Move Events, Checking out the game
tracing movement of objects, Tracing movement: A path of points, Moving on a Vector
transformations
about, Simple Canvas Transformations
applying to game graphics, Applying Transformations to Game Graphics, Game Object Physics and Animation
rotation, Rotation and Translation Transformations, Combining Scale and Rotation Transformations, Applying Rotation Transformations to an Image, Animating a Transformed Image, Canvas Video Transformations: Rotation, Canvas Video Puzzle, The Canvas Stack, Alpha Fading the Player Ship, Creating a Dynamic Tile Sheet at Runtime
scale, Scale Transformations, Combining Scale and Rotation Transformations
translation, Rotation and Translation Transformations, Lesson 2: We must “translate” the point of origin to the center of our shape to rotate it around its own center
translation transformations, Rotation and Translation Transformations, Lesson 2: We must “translate” the point of origin to the center of our shape to rotate it around its own center
transparency settings, Alpha Transparency with the globalAlpha Property, Updating the globalAlpha Property for Text Display, Global Alpha and Text
TYPE_MISMATCH_ERR error, Image Patterns and Text

U

update-collide-render cycle, Separating the code in drawScreen()
update/render (repeat) cycle, The Update/Render (Repeat) Cycle, The Update/Render (Repeat) Cycle

V

vectors
Geo Blaster Basic game and, Using Paths to Draw the Game’s Main Character
Geo Blaster Extended game and, Adding a Step Timer
moving on, Moving on a Vector, Bouncing Off Walls
velocity
ball collision example, Ball collisions in depth, Ball collisions in depth
in Geo Blaster Basic game, Giving the Player Ship a Maximum Velocity
vertex shaders, Shaders
vertical alignment of text, Vertical alignment
vertical gradients, Vertical gradients
video
altering width and height of, Altering the Width and Height of the Video, Preloading Video in JavaScript
animations in, Animation Revisited: Moving Videos, Capturing Video with JavaScript
capturing with JavaScript, Capturing Video with JavaScript, Video and Mobile
with controls, loop, and autoplay, Video with Controls, Loop, and Autoplay, Altering the Width and Height of the Video
creating video controls, Creating Video Controls on the Canvas, Animation Revisited: Moving Videos
displaying on HTML5 Canvas, Video and the Canvas, Video on the Canvas Examples
embedding, Basic HTML5 Video Implementation
events supported, Preloading Video in JavaScript, Video must still be embedded in HTML, Using the currentTime Property to Create Video Events, Canvas Video Transformations: Rotation
HTML5 formats supported, HTML5 Video Support, Combining All Three
HTML5 properties, HTML5 Video Properties, Video on the Canvas Examples
mobile devices and, Plain-Vanilla Video Embed, Video and Mobile
plain-vanilla video embed, Plain-Vanilla Video Embed
preloading in JavaScript, Preloading Video in JavaScript, Video and the Canvas
rotation transformations, Canvas Video Transformations: Rotation, Canvas Video Puzzle
taking screenshots for, Example 2: Put Video on the Canvas and Take a Screenshot, Example 2: Put Video on the Canvas and Take a Screenshot
Video Puzzle example, Canvas Video Puzzle, Creating Video Controls on the Canvas, Example 3: Create a Video Puzzle out of User-Captured Video, Video and Mobile
<video> tag
Video Puzzle example, Example 3: Create a Video Puzzle out of User-Captured Video
video codecs, HTML5 Video Support, Combining All Three
video controls
about, Creating Video Controls on the Canvas
creating video buttons, Creating video buttons
listening for button presses, Listening for the button presses, Animation Revisited: Moving Videos
placing buttons, Placing the buttons
preloading buttons, Preloading the buttons
video element (see HTMLVideoElement object)
video formats, HTML5 Video Support, Converting Video Formats
Video Puzzle example
about, Canvas Video Puzzle
creating collision detection, Creating hit test point-style collision detection
creating out of user-captured video, Example 3: Create a Video Puzzle out of User-Captured Video, Video and Mobile
detecting mouse interactions, Detecting mouse interactions and the canvas
drawing screen for, Drawing the screen, Drawing the screen
randomizing puzzle pieces, Randomizing the puzzle pieces
setting up game, Setting up the game, Setting up the game
swapping array elements, Swapping two elements in a two-dimensional array
testing game, Testing the game, Creating Video Controls on the Canvas
<video> tag
about, Mixing HTML5 Video and Canvas
autoplay attribute, Video with Controls, Loop, and Autoplay, Example 1: Show Video
controls attribute, Video with Controls, Loop, and Autoplay
<div> tag and, Video must still be embedded in HTML
formats supported, HTML5 Video Support, Combining All Three
height attribute, Plain-Vanilla Video Embed, Altering the Width and Height of the Video, Preloading Video in JavaScript
implementing, Basic HTML5 Video Implementation, Preloading Video in JavaScript
loop attribute, Video with Controls, Loop, and Autoplay
patterns with, Image Patterns and Text
preloading video in JavaScript, Preloading Video in JavaScript, Video and the Canvas
<source> tag and, Plain-Vanilla Video Embed
src attribute, Basic HTML5 Video Implementation, Plain-Vanilla Video Embed
width attribute, Plain-Vanilla Video Embed, Altering the Width and Height of the Video, Preloading Video in JavaScript
viewport settings for images, Changing the ViewPort Property of the Image
Visual Studio Express for Windows 8, Windows 8 Apps and the HTML5 Canvas
volume slider (audio player), Click-and-Drag Volume Slider, Case Study in Audio: Space Raiders Game
Vorbis audio codec, Theora + Vorbis = .ogg

W

W3C
on future of text accessibility, Making Text Accessible
Hit Testing proposal, Hit Testing Proposal
HTML Media Capture API, Capturing Video with JavaScript
on HTML5, What Is HTML5?
.wav file extension, Supported Formats, Finding the Supported Audio Format
Web Audio API
about, Web Audio API
Space Raiders game and, Space Raiders with the Web Audio API Applied, Space Raiders with the Web Audio API Applied
web browsers
audio events and, Playing a Sound with No Audio Tag
audio formats and, Supported Formats, Finding the Supported Audio Format
Canvas support, Introduction to HTML5 Canvas
event listeners and, Preloading all assets without global variables
HTML5 page example, A Simple HTML5 Page
iOS platform and, The TextButton.js file
multiple events firing for mouse clicks, Preloading the buttons
patterns with videos, Image Patterns and Text
range controls and, Font size and HTML5 range control
Retro Blaster Touch game on, Retro Blaster Touch, Checking out the game
scaling BS Bingo game for, Scaling the Game for the Browser, Testing the Game on an Actual Device
screen reader emulators, HTML5 Canvas and Accessibility: Sub Dom
Space Raiders game, Iteration #3: Creating a Sound Pool
testing chat applications, Testing the Application in Google Chrome
video formats and, H.264 + $$$ = .mp4, Plain-Vanilla Video Embed
Web Audio API and, Web Audio API
Web RTC Media Capture and Streams API and, Web RTC Media Capture and Streams API
Web RTC Media Capture and Streams API
about, Web RTC Media Capture and Streams API
getUserMedia() method, Web RTC Media Capture and Streams API, Example 1: Show Video
show video example, Example 1: Show Video, Example 2: Put Video on the Canvas and Take a Screenshot
WebGL
about, What Is WebGL?
additional information, How Do I Learn More About WebGL?, Further Explorations with WebGL
application demo, What Does a WebGL Application Look Like?, Further Explorations with WebGL
JavaScript libraries, WebGL JavaScript Libraries, Three.js
testing, How Does One Test WebGL?, Testing for WebGL support with Modernizr
.webm file extension, VP8 + Vorbis = .webm
WebM video standard, VP8 + Vorbis = .webm
while loop, Randomizing the puzzle pieces
window object
about, The Document Object Model (DOM) and Canvas
addEventListener() method, HTML5 Canvas “Hello World!”
innerHeight property, Updating the mouse listening code
innerWidth property', Updating the mouse listening code
load event, HTML5 Canvas “Hello World!”, Initializing the game: no global variables
open() method, Exporting Canvas to an Image
requestAnimationFrame() method, Animation Loop
setInterval() method, Animation Loop, Set an interval to update the display, HTML5 Video Properties
setTimeout() method, Animation Loop, Resetting the Canvas clearRect Function, Animated Gradients, Set an interval to update the display, Game Timer Loop, The Game State Machine, DragAndDrop.js
URL property, Example 1: Show Video
Windows 8 platform, Windows 8 Apps and the HTML5 Canvas, Windows 8 Apps and the HTML5 Canvas
Winiarczyk, Ben, Ball interactions in physics, Ball collisions in depth

X

Xiph.org, Theora + Vorbis = .ogg
XMLHttpRequest object
about, What Is the Web Audio API?
responseType property, Space Raiders with the Web Audio API Applied

Y

YouTube site, VP8 + Vorbis = .webm