HTML5 Canvas [228]
O’Reilly also has several books that you might find useful, including:
HTML5: Up and Running by Mark Pilgrim
Supercharged JavaScript Graphics by Raffaele Cecco
If you are interested in learning how some of the game-development techniques described in this book (as well as many others) can be applied to Flash, check out our other most recent book, The Essential Guide to Flash Games (friendsofED).
There is a real paradigm shift occurring right now on the Web. For most of the first decade of the 21st century, Java, Flash, Silverlight, and other plug-in RIA technologies dominated application development and design. At the time, there appeared to be no better solution for the development of rich applications in a web browser than to bolt on technology that was not native to the browser.
The emergence of the “connected apps” culture is changing this. Every platform—from phones to TVs, e-readers to tablets, wireless printers to desktop PCs—is targeted for web-enabled applications sold or distributed through an app store. In many ways, these apps are replacing RIA applications, or at the very least offering a compelling new platform for their development and distribution.
Where RIA technologies of the past—like Java, Flash, and Silverlight—could target nearly all web browsers and PCs, they are having trouble finding a true foothold in the area of connected apps (especially on platforms where they are restricted from running, like iOS). This is where HTML5 Canvas can really make a difference. With true cross-platform execution, applications run in the web browser (or compiled with technologies like PhoneGap) can be made available to the widest audience possible. Soon these applications will be enhanced with 3D graphics and have the ability to communicate with one another via technologies like the ElectroServer socket server. One can envision a day in the near future where technology platforms fade away, and the web-connected app world simply works, regardless of screen or location. This is the promise of HTML5—especially HTML5 Canvas. So, now that you have the tools to begin, what do you plan to build?
Index
A NOTE ON THE DIGITAL INDEX
A link in an index entry is displayed as the section title in which that entry appears. Because some sections have multiple index markers, it is not unusual for an entry to have several links to the same section. Clicking on any link will take you directly to the place in the text in which the marker appears.
Symbols
- (minus sign), -- (decrement) operator, Drawing the ball
2D context, Introduction to HTML5 Canvas, Retrieving the 2D Context, The 2D Context and the Current State
and current state, The 2D Context and the Current State
retrieving, Retrieving the 2D Context
3D with WebGL, 3D with WebGL, CopperLicht, How Do I Test WebGL?, How Do I Learn More About WebGL?, What Does a WebGL Application Look Like?, JavaScript libraries, Shaders, Testing for WebGL support with Modernizr, Initialization in canvasApp(), Animating the cube, Full Code Listing, Further Explorations with WebGL, WebGL JavaScript Libraries
JavaScript libraries used with WebGL, WebGL JavaScript Libraries
resources for learning about WebGL, How Do I Learn More About WebGL?
rotating cube application, What Does a WebGL Application Look Like?, JavaScript libraries, Shaders, Testing for WebGL support with Modernizr, Initialization in canvasApp(), Animating the cube, Full Code Listing, Further Explorations with WebGL
adding JavaScript libraries, JavaScript libraries
animating the cube, Animating the cube
complete code, Full Code Listing, Further Explorations with WebGL
initialization in canvasApp( ), Initialization in canvasApp()
shaders, Shaders
testing for WebGL support, Testing for WebGL support with Modernizr
testing WebGL, How Do I Test WebGL?
? (question mark), ?: ternary operator, Keyboard input
A
accelerometer (iPhone), Adding in an iPhone “Gesture