Review of HTML5 Canvas by Steve and Jeff Fulton
So, you don't have AdobeR FlashR but you want to create animations that will play on the web and mobile devices. Maybe you want to create a mobile app or game. You've done your research and discovered that you can do some really cool animations with something called the "HTML5 Canvas".
This book by Steve Fulton and Jeff Fulton entitled HTML5 Canvas will teach you about the Canvas element and creating animation for applications and games. It begins with a introduction to Canvas and web programming and then discusses the individual Canvas APIs for drawing on the canvas, user input and other techniques needed to reach your goal. I liked the authors' project-based teaching approach. They start with a basic HTML5 file setup that they then build upon throughout the exercises in the book. They devote one chapter to each major Canvas API.
The authors begin with the Canvas drawing API moving progressively from drawing simple lines and shapes to colors, gradients and patterns. They also teach how to transform what is drawn on the Canvas.
Next you discover the Canvas Text API and again learn about colors, gradients, patterns and various ways to manipulate text on the canvas. You build your first sample application called Text Arranger which allows the user to manipulate one line of text on the Canvas.
Building on these simple principles, the authors move on to the Canvas Image API and add more advanced techniques such as preloading images, transforming the image with code, cell-based sprite animation and tile maps. You build a sample pan and zoom application.
Now that the basics are covered, the authors add math and physics to create more complex animations. They teach how to add friction, gravity, elasticity and easing to your animations. They also discuss more advanced movement such as complex curves and movement along a vector.
You may not think of video when it comes to computer games but the authors teach you to preload video, add it to the Canvas and control it with movement. The sample application for this chapter is a puzzle game.
There is no Canvas API for audio but the authors demonstrate two sample applications. The first is a simple audio player that plays one song and the second is a Space Raiders game that plays sound dynamically.
At this point the authors begin to tie all the previous chapters together and delve more deeply into game essentials by building a mini game framework that can be used as a template for creating any game or application. They touch on the pros and cons of using HTML5 Canvas vs. Flash for game creation. Then, you first build a basic state machine Geo Blaster game from the basic template including a game timer and reusable objects. Next, you build a more advanced version of the Geo Blaster game by replacing paths with bitmap images. Finally, you create a turn-based strategy game similar to Daleks.
With the popularity of mobile applications, I was glad to see that the authors covered PhoneGap, the open-source software that translates the HTML5 Canvas application or game into a native app that can be played on the iPhone and sold in the iTunes store. The authors cover how to install Xcode and PhoneGap and how to test your app in a simulator and on a device. They also discuss how to code for the accelerometer iOS behavior. The application for this chapter is a BS Bingo game. The authors finished the book with a short discussion of Canvas 3D with WebGL and multi-player applications with ElectroServer 5.
Steve and Jell Fulton are senior game engineers for Zynga and previously worked for Mattel Toys. They specialize in Flash, Silverlight and HTML5 Canvas. They can be found at 8bitrocket.com.
More information and to download sample code at the O'Reilly website.
https://oreilly.com/catalog/0636920013327
*O'Reilly provided a review copy to me free of charge.
This book by Steve Fulton and Jeff Fulton entitled HTML5 Canvas will teach you about the Canvas element and creating animation for applications and games. It begins with a introduction to Canvas and web programming and then discusses the individual Canvas APIs for drawing on the canvas, user input and other techniques needed to reach your goal. I liked the authors' project-based teaching approach. They start with a basic HTML5 file setup that they then build upon throughout the exercises in the book. They devote one chapter to each major Canvas API.
The authors begin with the Canvas drawing API moving progressively from drawing simple lines and shapes to colors, gradients and patterns. They also teach how to transform what is drawn on the Canvas.
Next you discover the Canvas Text API and again learn about colors, gradients, patterns and various ways to manipulate text on the canvas. You build your first sample application called Text Arranger which allows the user to manipulate one line of text on the Canvas.
Building on these simple principles, the authors move on to the Canvas Image API and add more advanced techniques such as preloading images, transforming the image with code, cell-based sprite animation and tile maps. You build a sample pan and zoom application.
Now that the basics are covered, the authors add math and physics to create more complex animations. They teach how to add friction, gravity, elasticity and easing to your animations. They also discuss more advanced movement such as complex curves and movement along a vector.
You may not think of video when it comes to computer games but the authors teach you to preload video, add it to the Canvas and control it with movement. The sample application for this chapter is a puzzle game.
There is no Canvas API for audio but the authors demonstrate two sample applications. The first is a simple audio player that plays one song and the second is a Space Raiders game that plays sound dynamically.
At this point the authors begin to tie all the previous chapters together and delve more deeply into game essentials by building a mini game framework that can be used as a template for creating any game or application. They touch on the pros and cons of using HTML5 Canvas vs. Flash for game creation. Then, you first build a basic state machine Geo Blaster game from the basic template including a game timer and reusable objects. Next, you build a more advanced version of the Geo Blaster game by replacing paths with bitmap images. Finally, you create a turn-based strategy game similar to Daleks.
With the popularity of mobile applications, I was glad to see that the authors covered PhoneGap, the open-source software that translates the HTML5 Canvas application or game into a native app that can be played on the iPhone and sold in the iTunes store. The authors cover how to install Xcode and PhoneGap and how to test your app in a simulator and on a device. They also discuss how to code for the accelerometer iOS behavior. The application for this chapter is a BS Bingo game. The authors finished the book with a short discussion of Canvas 3D with WebGL and multi-player applications with ElectroServer 5.
Steve and Jell Fulton are senior game engineers for Zynga and previously worked for Mattel Toys. They specialize in Flash, Silverlight and HTML5 Canvas. They can be found at 8bitrocket.com.
More information and to download sample code at the O'Reilly website.
https://oreilly.com/catalog/0636920013327
*O'Reilly provided a review copy to me free of charge.
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Content copyright © 2023 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.
