1．Introduction to HTML5 Canvas 1
What Is HTML5? 2
The Basic HTML5 Page 3
<!doctype html> 3
<htmllang="en"> 4
<meta charset="UTF-8"> 4
<title>…</title> 4
A Simple HTML5 Page 4
Basic HTML We Will Use in This Book 5
<div> 5
<canvas> 7
The Document Object Model (DOM)and Canvas 7
JavaScript and Canvas 7
Where Does JavaScript Go and Why? 8
HTML5 Canvas"Hello World!" 8
Encapsulating Your JavaScript Code for Canvas 9
Adding Canvas to the HTML Page 10
Using the document Object to Reference the Canvas Element in JavaScript 11
Testing to See Whether the Browser Supports Canvas 11
Retrieving the 2D Context 12
The drawScreen() Function 12
Debugging with console.log 16
The 2D Context and the Current State 17
The HTML5 Canvas Object 18
Another Example:Guess The Letter 19
How the Game Works 20
The"Guess The Letter"Game Variables 20
The initGame() Function 21
The eventKeyPressed() Function 21
The drawScreen()Function 23
Exporting Canvas to an Image 24
The Final Game Code 25
Hello World Animated Edition 25
Some Necessary Properties 26
Animation Loop 27
Alpha Transparency with the globalAlpha Property 28
Clearing and Displaying the Background 28
Updating the globalAlpha Property for Text Display 29
Drawing the Text 29
HTML5 Canvas and Accessibility:Sub Dom 31
Hit Testing Proposal 32
What's Next? 33
2．Drawing on the Canvas 35
The Basic File Setup for This Chapter 35
The Basic Rectangle Shape 36
The Canvas State 37
What's Not Part of the State? 38
How Do We Save and Restore the Canvas State? 38
Using Paths to Create Lines 38
Starting and Ending a Path 39
The Actual Drawing 39
Examples of More Advanced Line Drawing 40
Advanced Path Methods 42
Arcs 42
Bezier Curves 44
The Canvas Clipping Region 45
Compositing on the Canvas 47
Simple Canvas Transformations 50
Rotation and Translation Transformations 50
Scale Transformations 56
Combining Scale and Rotation Transformations 57
Filling Objects with Colors and Gradients 60
Setting Basic Fill Colors 60
Filling Shapes with Gradients 61
Filling Shapes with Patterns 71
Creating Shadows on Canvas Shapes 75
Methods to Clear the Canvas 77
Simple Fill 77
Resetting the Canvas Width and Height 77
Resetting the Canvas clearRect Function 77
Checking to See Whether a Point Is in the Current Path 79
Drawing a Focus Ring 80
What's Next? 80
3．The HTML5 Canvas Text API 81
Canvas Text and CSS 81
Displaying Basic Text 82
Basic Text Display 82
Handling Basic Text in Text Arranger 82
Communicating Between HTML Forms and the Canvas 83
Using measure Text 84
fill Text and stroke Text 85
Setting the Text Font 89
Font Size,Face,Weight,and Style Basics 89
Handling Font Size and Face in Text Arranger 89
Font Color 94
Font Baseline and Alignment 96
Text Arranger Version 2.0 101
Text and the Canvas Context 101
Global Alpha and Text 101
Global Shadows and Text 103
Text with Gradients and Patterns 106
Linear Gradients and Text 107
Radial Gradients and Text 109
Image Patterns and Text 109
Handling Gradients and Patterns in Text Arranger 110
Width,Height,Scale,and to Data URL()Revisited 114
Dynamically Resizing the Canvas 114
Dynamically Scaling the Canvas 116
The to Data URL() Method of the Canvas Object 117
Final Version of Text Arranger 119
Animated Gradients 128
The Future of Text on the Canvas 132
CSS Text 133
Making Text Accessible 133
What's Next? 133
4．Images on the Canvas 135
The Basic File Setup for This Chapter 135
Image Basics 136
Preloading Images 137
Displaying an Image on the Canvas with drawImage() 137
Resizing an Image Painted to the Canvas 139
Copying Part of an Image to the Canvas 140
Simple Cell-Based Sprite Animation 142
Creating an Animation Frame Counter 143
Creating a Timer Loop 143
Changing the Tile to Display 143
Advanced Cell-Based Animation 145
Examining the Tile Sheet 145
Creating an Animation Array 145
Choosing the Tile to Display 146
Looping Through the Tiles 146
Drawing the Tile 147
Moving the Image Across the Canvas 148
Applying Rotation Transformations to an Image 149
Canvas Transformation Basics 150
Animating a Transformed Image 153
Creating a Grid of Tiles 155
Defining aTile Map 155
Creating a Tile Map with Tiled 156
Displaying the Map on the Canvas 158
Diving into Drawing Properties with a Large Image 161
Creating a Window for the Image 162
Drawing the Image Window 162
Changing the ViewPort Property of the Image 164
Changing the Image Source Scale 166
Panning to a Spot on the Source Image 167
Pan and Scale in the Same Operation 168
Pixel Manipulation 170
The Canvas Pixel Manipulation API 170
Application Tile Stamper 172
Copying from One Canvas to Another 179
Using Pixel Data to Detect Object Collisions 182
The Colliding Objects 183
How We Will Test Collisions 184
Checking for Intersection Between Two Objects 184
What's Next? 190
5．Math,Physics,and Animation 191
Moving in a Straight Line 191
Moving Between Two Points:The Distance of a Line 194
Moving on a Vector 199
Bouncing Off Walls 204
Bouncing a Single Ball 205
Multiple Balls Bouncing Off Walls 208
Multiple Balls Bouncing with a Dynamically Resized Canvas 214
Multiple Balls Bouncing and Colliding 219
Multiple Balls Bouncing with Friction 233
Curve and Circular Movement 239
Uniform Circular Motion 239
Moving in a Simple Spiral 243
Cubic Bezier Curve Movement 245
Moving an Image 251
Creating a Cubic Bezier Curve Loop 255
Simple Gravity,Elasticity,and Friction 259
Simple Gravity 260
Simple Gravity with a Bounce 263
Gravity with Bounce and Applied Simple Elasticity 266
Simple Gravity,Simple Elasticity,and Simple Friction 270
Easing 273
Easing Out(Landing the Ship) 273
Easing In(Taking Off) 277
Box2D and the Canvas 281
Downloading Box2dWeb 281
How Does Box2dWeb Work? 281
Box2D Hello World 282
Including the Library 282
Creating a Box2dWeb World 282
Units in Box2dWeb 283
Defining the Walls in Box2D 284
Creating Balls 285
Rendering b2debugDraw vs.Canvas Rendering 286
drawScreen() 287
Bouncing Balls Revisited 289
Translating to the Canvas 290
Interactivity with Box2D 293
Creating the Boxes 294
Rendering the Boxes 295
Adding Interactivity 296
Creating Boxes 296
Handling the Balls 297
Box2D Further Reading 303
What's Next? 303
6．Mixing HTML5 Video and Canvas 305
HTML5 Video Support 305
Theora+Vorbis=.ogg 305
H.264+$$$=.mp4 306
VP8+Vbrbis=.webm 306
Combining All Three 307
Converting Video Formats 307
Basic HTML5 Video Implementation 308
Plain-Vanilla Video Embed 309
Video with Controls,Loop,and Autoplay 311
Altering the Width and Height of the Video 312
Preloading Video in JavaScript 317
Video and the Canvas 321
Displaying a Video on HTML5 Canvas 321
HTML5 Video Properties 327
Video on the Canvas Examples 331
Using the currentTime Property to Create Video Events 331
Canvas Video Transformations:Rotation 335
Canvas Video Puzzle 341
Creating Video Controls on the Canvas 355
Animation Revisited:Moving Videos 364
Capturing Video with JavaScript 369
Web RTC Media Capture and Streams API 370
Example 1：Show Video 370
Example 2：Put Video on the Canvas and Take a Screenshot 373
Example 3：Create a Video Puzzle out of User-Captured Video 376
Video and Mobile 378
What's Next? 379
7．Working with Audio 381
The Basic<audio>Tag 381
Audio Formats 382
Supported Formats 382
Audacity 382
Example：Using All Three Formats 384
Audio Tag Properties,Functions,and Events 385
Audio Functions 385
Important Audio Properties 385
Important Audio Events 386
Loading and Playing the Audio 387
Displaying Attributes on the Canvas 388
Playing a Sound with No Audio Tag 391
Dynamically Creating an Audio Element in JavaScript 392
Finding the Supported Audio Format 393
Playing the Sound 394
Look Ma,No Tag! 395
Creating a Canvas Audio Player 397
Creating Custom User Controls on the Canvas 398
Loading the Button Assets 399
Setting Up the Audio Player Values 400
Mouse Events 401
Sliding Play Indicator 402
Play/Pause Push Button:Hit Test Point Revisited 403
Loop/No Loop Toggle Button 406
Click-and-Drag Volume Slider 406
Case Study in Audio:Space Raiders Game 416
Whv Sounds in Apps Are Different:Event Sounds 416
Iterations 416
Space Raiders Game Structure 417
Iteration#1：Playing Sounds Using a Single Object 426
Iteration#2：Creating Unlimited Dynamic Sound Objects 427
Iteration#3：Creating a Sound Pool 429
Iteration#4：Reusing Preloaded Sounds 431
Web Audio API 435
What Is the Web Audio API? 436
Space Raiders with the Web Audio API Applied 436
What's Next? 439
8．Canvas Games：PartⅠ 441
Whv Games in HTML5? 441
Canvas Compared to Flash 442
What Does Canvas Offer? 442
Our Basic Game HTML5 File 442
Our Game's Design 444
Game Graphics:Drawing with Paths 444
Needed Assets 445
Using Paths to Draw the Game's Main Character 445
Animating on the Canvas 448
Game Timer Loop 448
The Player Ship State Changes 449
Applying Transformations to Game Graphics 451
The Canvas Stack 451
Game Graphic Transformations 453
Rotating the Player Ship from the Center 453
Alpha Fading the Player Ship 455
Game Object Physics and Animation 456
How Our Player Ship Will Move 456
Controlling the Player Ship with the Keyboard 458
Giving the Player Ship a Maximum Velocity 462
A Basic Game Framework 463
The Game State Machine 463
The Update/Render(Repeat)Cycle 467
The FrameRateCounter Object Prototype 469
Putting It All Together 471
Geo Blaster Game Structure 471
Geo Blaster Global Game Variables 475
The Player Object 476
Geo Blaster Game Algorithms 477
Arrays of Logical Display Objects 477
Level Knobs 479
Level and Game End 480
Awarding the Player Extra Ships 481
Applying Collision Detection 481
The Geo Blaster Basic Full Source 483
Rock Object Prototype 484
Simple A Path Finding on a Tile Grid 486
What Is A? 486
A Applied to a Larger Tile Map 493
A Taking Diagonal Moves into Account 498
A with Node Weights 502
A with Node Weights and Diagonals 506
Moving a Game Character Along the A Path 514
Tanks That Pass Through Walls? 518
What's Next? 528
9．Canvas Games：PartⅡ 529
Geo Blaster Extended 529
Geo Blaster Tile Sheet 530
Rendering the Other Game Objects 535
Adding Sound 541
Pooling Object Instances 546
Adding a Step Timer 548
Creating a Dynamic Tile Sheet at Runtime 550
A Simple Tile-Based Game 555
Micro Tank Maze Description 556
The Tile Sheet for Our Game 556
The Playfield 558
The Player 559
The Enemy 560
The Goal 561
The Explosions 561
Turn-Based Game Flow and the State Machine 562
Simple Tile Movement Logic Overview 566
Rendering Logic Overview 568
Simple Homegrown AI Overview 569
Micro Tank Maze Complete Game Code 570
Scrolling a Tile-Based World 570
First,a Tile Sheet That Contains the Tiles We Want to Paint to the Screen 570
Second,a Two-Dimensional Array to Describe Our Game World 571
Third,Paint the Tile-Based World to the Canvas 571
Coarse Scrolling vs.Fine Scrolling 572
The Camera Object 572
The World Object 573
Fine Scrolling the Row and Column Buffers 574
Coarse Scrolling Full Code Example 580
Fine Scrolling Full Code Example 585
What's Next? 589
10．Going Mobile! 591
The First Application 591
The Code 592
Examining the Code for BSBingo.html 597
The Application Code 600
Scaling the Game for the Browser 601
Testing the Game on an Actual Device 606
Retro Blaster Touch 607
Mobilizing Retro Blaster Touch 610
Jumping to Full Screen 610
Touch Move Events 612
Retro Blaster Tcuch Complete Game Code 618
Beyond the Canvas 619
What's Next? 619
11．Further Explorations 621
3D with WebGL 621
What Is WebGL? 621
How Does One Test WebGL? 622
How Do I Learn More About WebGL? 622
What Does a WebGL Application Look Like? 623
Further Explorations with WebGL 628
WebGL JavaScript Libraries 629
Multiplayer Applications with ElectroServer 5 630
Installing ElectroServer 631
The Basic Architecture of a Socket-Server Application 634
The Basic Architecture of an ElectroServer Application 634
Creating a Chat Application with ElectroServer 636
Testing the Application in Google Chrome 641
Further Explorations with ElectroServer 642
This Is Just the Tip of the Iceberg 645
Creating a Simple Object Framework for the Canvas 646
Creating the Drag-and-Drop Application 646
Application Design 647
Windows 8 Apps and the HTML5 Canvas 659
What's Next in HTML5.1 and Canvas Level 2? 663
HTML5.1 Canvas Context 663
Canvas Level-2 664
Conclusion 664
A．Full Code Listings 667
Index 711