HTML5 Canvas (2nd Edition) Is Out, Goes Chinese!

Our new edition of HTML5 Canvas is out, and it's getting some good reviews.  We poured a lot of effort into this one to make sure it was updated for 2013.   We just heard from O'Reilly that they there will be a Chinese translation of this one too (there were both Korean and Chinese translation of the last book too).  The English version is on sale here: http://www.amazon.com/HTML5-Canvas-Steve-Fulton/dp/1449334989/ref=sr_1_1?ie=UTF8&qid=1376404060&sr=8-1&keywords=html5+canvas



In Celebration of Day Against DRM (Fri, May 3, 2013) 5000+ titles 1/2 off including HTML5 Canvas 2nd Edition

HTML5 Canvas 2nd Edition

HTML5 Canvas 2nd Edition

              In Celebration of *Day *Against DRM

Save 50% on 5000+ Ebooks & Videos

(Save 60% on orders over $100)

Having the ability to download files at your convenience,

store them on all your devices, or share them with a friend

or colleague as you would a print book is liberating, and is

how it should be. This is a critical moment in the fight against

DRM. A proposal currently being considered by the W3C would

weave DRM into HTML5 — in other words, into the very fabric of

the Web.


This includes the latest edition of our book, the just released HTML5 Canvas 2nd Edition.


Ebooks from oreilly.com are DRM-free. You get free lifetime access, multiple file formats, free updates.

Use discount code: DRM2013 - Deal expires May 3, 2012 at

11:59pm PT and cannot be combined with other offers.


The HTML5 Canvas Second Edition Has Been Released (Deal of the Day, 50% off)

HTML5 Canvas 2nd Edition

HTML5 Canvas 2nd Edition


The Second Edition (so the 3rd book) I have written with my brother Steve, The HTML5 Canvas was released today by O'Reilly. If you are interested in this wildly popular subject (for tech heads), you can get the E-Book edition for 1/2 off by using the code DEAL on the Publisher Web Site (It's the DEAL of the day).


This edition has added and changed over 50% of the original First edition. We have added A LOT of game related topics (as we do in everything we create). These include pixel perfect collision detection, Box2D Physics, A* Path Finding, targeting mobile browsers with full screen scalable content, and much much more. Every chapter has been re-written with additional content added and less popular or redundant content removed.

There are print editions available also at all major book retailers.


HTML5 Canvas + Web Cam + Chrome = HTML5 Video Puzzle Of You! (Demo)

We are finishing up an update to our HTML5 Canvas book, and I wanted to share one of new examples.   This one takes the Video Puzzle app from the first edition of the book, and adds web cam support.  It only works in Chrome right now.   You also need a working web cam.  Also, you might have to start the web cam before the browser will see it.   To play the "game", click the pieces to swap their positions.  Make yourself whole again!

Check it out by clicking the image below:








Don’t be afraid of Windows 8 Desktop

This (Windows 8 has problems, but it doesn’t deserve the dreaded Vista comparison)says that Windows 8 is only good for touch screens.

Windows 8 Desktop

Windows 8 Desktop


He is wrong. Windows 8 is just Windows 7 with new "window" dressing and a few new good features. The backup and app search are 10X better than Windows 7 [Start] menu or (especially) OS X Finder.

Windows 8 Search

Windows 8 Search

If you need to old Win 7 desktop, just click on the giant DESKTOP button.

Windows 8 Desktop

Windows 8 Desktop


You will be right back to familiar territory. There is nothing to fear from Windows 8, except time wasted playing with the new free (or low cost) games and apps from the Windows 8 store.



They are easy to build also, as the HTML5 Canvas (we tested all of our book's apps with in) can easily be compiled into Windows Store Apps. This gives you the ability to port all of the older Flash, Android, or iOS games that you want to port to a new platform.


Friday was a Tough Day for a Deadline, but HTML5 Canvas 2nd Edition Is Nearly Complete

By Jeff Fulton (8bitjeff)

Tough Day for a Deadline, but HTML5 Canvas 2nd Edition Is Nearly Complete

There will be no Atari video game retrospectives this weekend on 8bitrocket. Far too many little ones will not get to experience their own version of the same thing, never have a chance to write about it some day, and never have the joy of spending another holiday season with their families. Our hearts are broken here at 8bitrocket towers. For a site dedicated to things we loved as children and exploring how to re-visit and re-create those memories in many different ways, we just can't celebrate anything like that right now. What we have is work though, and as anyone who is trying to make it without any corporate backing knows, work MUST go on, no matter what happens, or food doesn't make it on the table, health insurance premiums are not paid for, car loans and housing payments go un-paid and life just kind of stops and spins like a proverbial hamster on a habitrail.

First, here is a list of the first names of all the brave little ones and their hero protectors that didn't make it out safely.
I can't fathom the evil that would do such a thing:


So, with a heavy heart and tears welling up, I crashed through some technical barriers I was experiencing and finally completed chapter 9 of the Second Edition of our HTML5 Canvas book for O'Reilly.

All of the chapters have been updated, revised, and re-written to add new content and replace out-dated or incomplete ideas that simply were not possible on the Canvas when we started on this project 2 and 1/2 years ago. My major focus has been adding in more game development content to the various chapters (especially the two game specific chapters) to have a more complete reference guide for the budding and experienced HTML5 Canvas game developers. Not that the first edition was limited in scope at all, but there was no time or space to cover some subjects that we really wanted to cover, and some that were impossible until this point. I have been working on chapters 8 and 9 (Game Essentials 1 and 2) for the last few months, shoring them up to provide a much better set of tools for myself and anyone who buys the new edition. Steve has been working on updating the physics, sounds, video, text chapters and adding anything new he finds that might be useful across the the entire book.

It has not been easy, especially since the deadline was Friday (a tragic day to even think about work), but I was finally able to get a revised 2nd edition of chapter 9 (Game Essentials Part 2)  complete and to the publisher for a first look. The two game chapters (8, and 9) and the image chapter (4) have been re-written to add in things that I wanted in the first edition but just didn't have time to fit in: Pixel-based collision detection, A* Pathfinding, Fine and Coarse tile-based world scrolling, and more. I know Steve has been busy adding in Box 2D content and other goodies to his chapters. There is just one chapter left to do for me, number 10. It deals with using Phone-Gap to create a HTML5 based iOS native application, and we are adding in the concept porting a browser game to a touch interface. The first part needs to be re-written 100% as everything about PhoneGap, xCode and the iOS portal has been completely re-vamped since the first edition. Also, more and more people are publishing games on the internet to target mobile browsers and we wanted to add in some "secret sauce" that we have uncovered to make this a little easier of a transition for the developer.

Here are some images from the various chapters that I have written to help give you an idea of what game subjects I have been covering and how they will be presented in the new edition (Tentative publish date March 2013).

Pixel Based Collisions

Pixel Based Collisions

AStar on the Canvas

AStar on the Canvas

Fine Scrolling

Fine Scrolling


I am starting on chapter 10 today, so hopefully the entire first draft will be complete by the middle of the week and then it is on to technical reviewer revisions and Chicago Book of Style red lines to fix.


We are looking for Paid Technical Reviewers for the 2nd Edition of The HTML5 Canvas book on O’Reilly

By Jeff D. Fulton (8bitjeff)

We are looking for Paid Technical Reviewers for the 2nd Edition of The HTML5 Canvas book on O'Reilly press.

We have added about 150 new pages that need to be reviewed by 2-3 people with knowledge of Javascript and or the HTML5 Canvas. We'll offer you cash and name credit in the book for your efforts.

If you are interested, please contact me at jeff[at]8bitrocket.com (obviously replace the "[at]" with an "@".


Xbox 360 Internet Explorer Plays HTML5 Games…But Not Flash

This morning I work up early to download the new Xbox Live update that includes Internet Explorer.  My goal was to try out some of our HTML5 Canvas game experiments to see is they work on the new I.E for the Xbox.   To my surprise, they work fairly well.   Both 1945 Demo and Atari 2600 Match 3 work with the game pad (the mouse maps well to the analog stick) and include nearly all the sound FX (no mean feat for an HTML5 game).

The main issues seem to be the is the size/scale of the games, and mapping the cursor to stay inside the game area. I spent no time trying to update the games to work inside the 360 I.E. browser, but I'm certain it will not take very long to optimize them for the platform.

Obviously, the games are just demos and need work, but you can see that there might be a bright future for browser-based games on the Xbox...at least in HTML5.   The Flash games I tried did not work, and it looks like the player cannot be installed.   So much for playing Home Computer Wars on the Xbox.  I guess I need to make a version in HTML5.






Atari 2600 Match  3 Demo






1945 Demo




box2dweb for the HTML5 Canvas: Converting MTS Units To Pixels To Apply To The Canvas

I'm starting to love box2dweb.

I've been working on a revisions for the new edition of our O'Reilly book on the HTML5 Canvas, and I thought it would be nice to add some coverage of box2d to chapter 5 (Math and Physics).

There are two box2d implementations for JavaScript.  The first is box2djs, and the other is box2dweb.  Apparently box2dweb is the latest and greatest, so that is the one I chose to use.

At first, it took me a little while to understand what was going on.   I kept wanting to attach images or drawing objects to the output from debugDraw,  Then, all of a sudden, things clicked.    box2dweb is simply a model of the physics.  My job is to apply it to the Canvas.

One of the biggest hurdles with applying  box2d models to the Canvas is that box2d uses mts units (metre–tonne–second)  instead of pixels.  This complicates applying models the Canvas because, for 2D game developers, pixels are a way of life.   Since mts units are designed to apply to the real world (which is good for physics) I needed a way to convert those units to pixels to then apply them to the Canvas.

After a bit of trial and error, I came up with a factor of 30.

<em>var scaleFactor = 30;</em>

To create the walls that bound the Canvas (the walls that the balls bounce off of) I would do something like this.  notice, these are in pixels relative the Canvas.

var wallDefs = new Array(
   {x:theCanvas.width,y:0,w:theCanvas.width ,h:1}, //top
   {x:theCanvas.width,y:theCanvas.height,w:theCanvas.width ,h:1}, //bottom
   {x:0,y:theCanvas.height,w:1 ,h:theCanvas.height}, //left
   {x:theCanvas.width,y:theCanvas.height,w:1 ,h:theCanvas.height}
); //right


When I go to define my walls in box2dweb, I apply the scaleFactor to size and position of walls using division.

var walls = new Array();
 for (var i = 0; i &lt;wallDefs.length; i++) {
    wallDef.position.Set(wallDefs[i].x/scaleFactor, wallDefs[i].y/scaleFactor);
    wallFixture.shape.SetAsBox(wallDefs[i].w/scaleFactor, wallDefs[i].h/scaleFactor);


When I go to draw my objects on the Canvas, I multiply the mts units in box2dweb by scaleFactor, so I know the size and position of my objects relative to the the Canvas.

context.arc(position.x * scaleFactor  , position.y * scaleFactor ,shape.GetRadius() *scaleFactor ,0,Math.PI*2,true);

Depending on your application, this factor will probably need to be adjusted based on the scale of the world you are simlulating.

To test to make sure all of this works, I make sure to set the debugDraw scale to 30 as well:

<em>debugDraw.SetDrawScale(scaleFactor); </em>

Below is the a screen shot of the bouncing balls demo using two canvases (I can't post the code yet because it is for the new book).  The first shows the canvas version of the demo, and the second shows the debugDraw() version.

Filed under: HTML 5 Canvas No Comments

HTML5 Canvas : Animating Gradients To Create A Retro Atari Style Color Cycle

We just finished our semi-final run into the Atari Pong Developer Contest last week, but I'm still feeling a little "retro".   This weekend I decided to see if I could replicate an old-style Atari color-cycle in HTML5 using the Canvas API alone: no bitmaps or anything other helpers.

The results are below.

(note, if you can't see this try it in Google Chrome)

At first I did not know how I was going to achive this, but the answer came fairly quickly.    I decided to use the Canvas API  createLinearGradient() function.   createLinerGradient() works like this.  You set-up a gradient "line" the represents the direction of the color gradient.  Then you create "color stops" that represent the colors to the gradient.    I'll show this in the code  code later.

To get started, I first, I set-up an animation loop:

function drawScreen() {
function gameLoop() {
   window.setTimeout(gameLoop, 20);

Next, I created a simple array of objects that represented the colors of the gradient and the color stops.  Colors stops are percentage of the gradient. I started with red, then added yellow, blue, green, purple, and red again.  I had to add red twice so that the color flowed back the beginning.  Notice that the percentages for both reds are only 1/2 of the others (.125 as instead of  .25)

var colorStops = new Array(
 {color:"#FF0000", stopPercent:0},
 {color:"#FFFF00", stopPercent:.125},
 {color:"#00FF00", stopPercent:.375},
 {color:"#0000FF", stopPercent:.625},
 {color:"#FF00FF", stopPercent:.875},
 {color:"#FF0000", stopPercent:1});

Next, inside the drawScreen()  function I created the gradient.

First, I set-up up a gradient on the current path.  The  arguments to the function represent the "line" that the gradient will follow.  Since I wanted the gradient to be in a straight vertical line, I centered it in the middle of the canvas, and drew it directly down to the bottom.

var gradient = context.createLinearGradient( 

Next, I loop through the colorStops array calling gradient.addColorStop() for each color in the array.    A "gradient color stop"() has two arguments: the color and the percentage.  I already set these up in the array, so now they are just applied in a loop.
After each gradient color stop() is added, I increment the percentage of each color by .015.  This effectively moves the color "up" .  If the gradient color stop percentage value goes above 1, I set it back to 0, which moves it back to the bottom of the gradient.

for (var i=0; i < colorStops.length; i++) {     
   var tempColorStop = colorStops[i];     
   var tempColor = tempColorStop.color;     
   var tempStopPercent = tempColorStop.stopPercent;     
   tempStopPercent += .015;     
   if (tempStopPercent > 1) {
       tempStopPercent = 0;
   tempColorStop.stopPercent = tempStopPercent;;
   colorStops[i] = tempColorStop;

In reality, the gradient is not being "animated", I'm just changing the location of each color by changing the gradient color Stop percentage.  However, the effect is the same.  It looks like the colors are cycling.

Finally, I display the text using the gradient as the color for fillStyle.

  context.fillStyle = gradient;
  context.fillText ( message, xPosition ,yPosition);

That's it.  I'm sure all kinds of other, way more awesome, effects can be created with animated gradients, but this is just a start.

You can get the code here.


This site is protected by Comment SPAM Wiper.