Create eye-popping visuals on the fly with HTML5 Canvas
Now part of the HTML5 standard tool, Canvas gives programmers the ability to add images, animation, and sound to mobile and regular websites on the fly, in JavaScript, without needing any third-party tool or player. This practical For Dummies book clearly shows you how to get the most out of Canvas. It presents information in a friendly, non-intimidating way and helps you get started with the Canvas tag, create 2D drawings and images, add video and audio, build a basic game framework, weave spellbinding animation, and more.
If you want to learn how to use HTML5 Canvas, this easy-to-follow guide is just the ticket.
Get started using HTML5 Canvas right away with HTML5 Canvas For Dummies.
Introduction 1
About This Book 1
Foolish Assumptions 2
Conventions Used in This Book 2
How This Book Is Organized 3
Part I Looking at Canvas 3
Part II Drawing on Canvas 3
Part III Breathing Life into Your Canvas 3
Part IV Developing More Complex Applications 3
Part V The Part of Tens 3
Bonus Chapter: Gaming with Canvas 3
eCheat Sheet 3
Icons Used in This Book 4
Where to Go From Here 4
Part I Looking at Canvas 5
Chapter 1 A Quick Glimpse Behind the Canvas 7
Displaying Your Canvas on the Stage of the World Wide Web 7
Client devices 9
Remote devices 15
Seeing a Canvas Application in Action 16
Using your browser to display a sample Canvas 16
Using the sample code 17
Chapter 2 Setting Up Your Canvas Platform 21
Testing Canvas Performance on Your System 21
Tuning Your Display 23
Understanding pixels 24
Adjusting your display 25
Turning on browser GPU hardware acceleration 27
Testing Your Application on Mobile Devices 28
Measuring Web Browser Support for HTML5 Canvas 29
Examining HTML5 Canvas support 29
Testing the browsers you use 30
Using Text Editors 31
Standard text editors 31
Alternatives to standard text editors 32
Saving HTML5 Canvas application files 34
Using Code Debuggers 35
Firefox Firebug 35
Firerainbow 37
Other browsers' debugging tools 37
Part II Drawing on Canvas 39
Chapter 3 Creating Objects 41
Positioning Objects on a Canvas 41
Defining a web page to hold your Canvas 41
Defining your Canvas 44
Absolute positioning 47
Relative positioning 48
Drawing Rectangles 50
Defining Object Attributes 51
Colors 53
Gradients 56
Patterns 61
Transparency 64
Shadows 66
Clipping 68
Displaying Text 70
Font attributes 70
Text baseline 71
Text alignment 74
Drawing Lines 76
Line attributes 77
Line caps 78
Line joins 78
Line construction 78
Chapter 4 Enhancing Objects 81
Drawing Multi-Sided Shapes 81
Drawing Curves 85
Arcs 85
Circles 89
Rounded corners 92
Bezier curves 95
Quadratic curves 97
Multi-segment curves 100
Compositing Objects 102
Compositing options 105
Creating a table to hold the examples 106
Drawing the composite shapes 106
Randomizing Shapes 107
Displaying Images 110
Chapter 5 Transforming Objects 115
Translating 115
Saving Canvas States 118
Scaling 119
Mirroring 121
Rotating 125
Applying a Transform Matrix 129
Scaling objects 132
Skewing objects 132
Translating objects 133
Chapter 6 Moving Objects 135
The Basics of Movement 135
Using multiple Canvas elements 137
Creating the background 138
Drawing a moving object 139
Creating Circular Motion 141
Basic aspects 143
Unique aspects 144
Creating Oscillation 144
Basic aspects 148
Unique aspects 149
Adjusting Movement for Acceleration, Gravity, Friction, and Bounce 151
Basic aspects 156
Unique aspects 157
Part III Breathing Life into Your Canvas 169
Chapter 7 Mastering the Art of Canvas 171
Creating Appealing Canvas Spaces 171
Choosing the size and proportions of your Canvas 172
Resizing and rescaling your Canvas 172
Dividing your Canvas with the rule of thirds 176
Using the golden ratio in your design 177
Creating Complex Shapes and Images 179
Basic aspects 185
Key aspects 185
Getting the Most Out of Color 187
Using online color tools 187
Combining colors 189
Creating Textures 190
Chapter 8 Introducing User Interaction 193
Responding to User Events 193
The Document Object Model (DOM), event listeners, and callbacks 202
Event listener response areas 203
DOM event definitions 205
Canvas event listeners 205
Browser window event listeners 206
Handling Key Events 206
Discovering key codes 207
Handling a key press 208
Handling Mouse Events 209
Dragging and Dropping Objects 210
Mouse down events 211
Mouse move events 212
Mouse up events 213
Displaying Information for the User 214
Chapter 9 Creating Engaging Imagery and Motion 217
Developing an Application Look and Feel 217
Defining dimensions of appearance and motion 224
Defining the visual dimensions of your application 224
Using an image as a background 227
Prompting User Interaction 228
Using motion to attract attention 228
Responding to interaction 229
Managing Animations 230
Animation frame rates 230
Defining your animation control function 231
Defining your main animation drawing function 235
Calculating and displaying the animation frame rate 235
Moving objects at controlled speeds 236
Defining and storing image sequences 237
Moving images across a background 239
Testing Browser Animation Performance 241
Creating the base code 246
Defining an animation control function to stress the browser 246
Drawing browser performance stressing images 247
Chapter 10 Sounding Off with Audio 249
Including Audio in Your Canvas Application 249
Creating Audio Recordings 257
Recording or downloading audio 257
Creating supported audio file types 258
Controlling Audio Recordings 258
Audio attributes 259
Audio functions 261
Audio events 262
Defining Audio Elements 263
Defining audio elements using HTML tags 263
Defining audio elements with JavaScript code 265
Responding to User Interaction 266
Responding to Canvas area interaction 266
Responding to audio player interaction 270
Defining Other Application Components 270
Part IV Developing More Complex Applications 273
Chapter 11 Grabbing Attention with Video 275
Including Video in Your Application 275
Creating Video Recordings 283
Recording or downloading your video 284
Creating supported video file types 284
Controlling Video Recordings 285
Video attributes 286
Video functions 287
Video events 288
Defining Video Elements 289
Defining elements using HTML tags 289
Defining elements using JavaScript code 291
Using Animation to Draw Video Frames 292
Starting the video 292
Setting up the animation loop 292
Drawing the video images 293
Responding to User Interaction 295
Responding to Canvas area interaction 295
Responding to video player interaction 298
Defining Other Application Components 299
Chapter 12 Enhancing Canvas Applications 301
Aspects of Enhancement 319
Reasons for enhancement 319
Techniques of enhancement 319
Application of enhancement 320
Constructing an Application Base 320
On load function 320
Animation setup function 320
Animation loop 321
Drawing function 321
Object movement 321
Object drawing 321
Playing audio 322
User interaction 322
Enhancing Background Canvas Layers 322
Shading a background 322
Creating reflected light on a background 323
Creating simulated background movement 324
Creating Multiple and Multifaceted Objects 325
Storing variables in an array 325
Using randomized object characteristics 326
Spawning new objects 328
Creating Object Tails 329
Creating Layered Audio 330
Managing Performance 332
Part V The Part of Tens 333
Chapter 13 Ten Great Canvas Applications 335
Bomomo 335
Canvas Cycle 336
Chrome Experiments 336
Grow a Face 337
Burn Canvas 337
Canvas Sketch 337
Canvas 3D Engine 337
Canvas Raytracer 337
Pocket Full of Canvas 338
Plasma Tree 338
Chapter 14 Ten Great Tools 339
Audacity 339
Can I Use 340
EaselJS 340
Electrotank 340
Firebug 341
Gamepad API 341
HTML5 Test 341
Anonymous
Posted May 8, 2013
Great book
Was this review helpful? Yes NoThank you for your feedback. Report this reviewThank you, this review has been flagged.
Overview
Create eye-popping visuals on the fly with HTML5 Canvas
Now part of the HTML5 standard tool, Canvas gives programmers the ability to add images, animation, and sound to mobile and regular websites on the fly, in JavaScript, without needing any third-party tool or player. This practical For Dummies book clearly shows you how to get the most out of Canvas. It presents information in a friendly, non-intimidating way and helps you get started with the Canvas tag, create 2D drawings ...