g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Folklore and Mythology
Women's Fashion
Holiday/Seasonal Cooking
Hiking & Backpacking
New Age

All times in EST

Low Carb: 8:00 PM

Full Schedule
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor


HTML5 Canvas for Games and Entertainment

Animation and games go hand in hand. Of the many ways to create animation, the HTML5 canvas is one of the low cost options, as there is no expensive software involved. Foundation HTML5 Canvas: For Games and Entertainment by Rob Hawkes is a good beginner's book for those interested in learning to create HTML5 Canvas games.

Hawkes begins an introduction to HTML5 by deconstructing the basic HTML5 page. He discusses how CSS3, JavaScript and the JQuery library work together with HTML5. As JavaScript is an important part of game creation with HTML5, the author spends much time covering the basics of JavaScript including variables, data types, functions, conditionals and more. Once that is out of the way, Hawkes moves on to the basics of the HTML5 canvas, taking it step-by-step from drawing shapes and erasing the canvas to controlling the browser.

Things start to get interesting as Hawkes introduces scaling, rotation and other transformations. Next, he moves on to adding realism with shadows and gradients and exporting the canvas as an image. Once you learn how to load and create an image from scratch, he moves up to pixel manipulation for transforming an image and applying effects.

Motion and making things move gets you one step closer to building your first game. Hawkes covers the basics such as remembering states and movement along a circle. You can't have a game without boundaries and collision detection and the author discusses the basics of physics such as velocity, acceleration and friction used to create realistic motion.

Now you are ready to create your first game which is a Space Bowling Game. You learn how to control stationary and non-stationary objects along with how to construct a user interface for your game. You also learn about detecting mouse input and coding the win/lose player scenario. The Asteroid Avoidance Game is your next game where Hawkes teaches how to detect keyboard input and control audio within the game.

Hawkes ends the book with a short discussion of the differences between HTML5 canvas and the alternatives such as FlashR. He also points out the limitations of canvas such as CPU performance and the future of canvas which includes 3D and various libraries.

Rob Hawkes studied Interactive Media Production at Bournemouth University and is a visual programmer specializing in HTML5 and other new features of the web. You can download the source code from the publisher's website.

Preview on Google Books

Visit Publisher's Website

Visit Author's Website

*Apress Media 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 HTML5+Canvas+for+Games+and+Entertainment to Twitter Add HTML5+Canvas+for+Games+and+Entertainment to Facebook Add HTML5+Canvas+for+Games+and+Entertainment to MySpace Add HTML5+Canvas+for+Games+and+Entertainment to Del.icio.us Digg HTML5+Canvas+for+Games+and+Entertainment Add HTML5+Canvas+for+Games+and+Entertainment to Yahoo My Web Add HTML5+Canvas+for+Games+and+Entertainment to Google Bookmarks Add HTML5+Canvas+for+Games+and+Entertainment to Stumbleupon Add HTML5+Canvas+for+Games+and+Entertainment 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

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 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 features
Scapple Mind Mapping App - Great Features

Index Card Carrier SVG Cut File - Final

Index Card Carrier SVG Cut File - The Specs

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

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

BellaOnline Editor