logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

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.
http://oreilly.com/catalog/0636920013327

Title: HTML5 Canvas
Author: Steve and Jeff Fulton
Pages: 652
Publisher: O'Reilly Media
Date Published: May 13, 2011
ISBN-10: 144939390X


*O'Reilly provided a review copy to me free of charge.

Join us in the Flash forum. | Join us in the Digital Art and Design forum.

Add Review+of+HTML5+Canvas+by+Steve+and+Jeff+Fulton to Twitter Add Review+of+HTML5+Canvas+by+Steve+and+Jeff+Fulton to Facebook Add Review+of+HTML5+Canvas+by+Steve+and+Jeff+Fulton to MySpace Add Review+of+HTML5+Canvas+by+Steve+and+Jeff+Fulton to Del.icio.us Digg Review+of+HTML5+Canvas+by+Steve+and+Jeff+Fulton Add Review+of+HTML5+Canvas+by+Steve+and+Jeff+Fulton to Yahoo My Web Add Review+of+HTML5+Canvas+by+Steve+and+Jeff+Fulton to Google Bookmarks Add Review+of+HTML5+Canvas+by+Steve+and+Jeff+Fulton to Stumbleupon Add Review+of+HTML5+Canvas+by+Steve+and+Jeff+Fulton to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Digital Art and Design Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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.

g


g features
Pixelmator 3 for the Mac

Pixelmator 3 Photoshop Alternative

Pixelmator 3 Review

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor