HTML Canvas Deep Dive

2013 Edition: Games

Games account for about half of the apps in the typical app store. They are among the first thing ported to any new platform. Games help drive technology forward. This year's edition of the popular HTML Canvas Deep Dive will focus specifically on building cross platform games for mobile and desktop. We will cover everything needed to build basic games with animation, scrolling, sound effects and music, image loading, sprites, and even joystick support. Then we will learn how to package them to run on desktop and mobile devices, both in and outside of app stores.


Hi Welcome to HTML Canvas Deep Dive. This is the third year I've done the talk and I think it will be our most exciting one yet. The problem with HTML is that it keeps getting bigger. The technology grows to encompass more things. First it was simple 2d, then 3d, now audio, camera input, and even joysticks. And this is just the media related technologies. I haven't even touched on networking and intensive processing. And they are all needed to get the most out of Canvas. Fortunately, every year I record the new material in my free online book at my website. This means you can still learn the things we don't have enough time to cover here. So after this workshop please check it out. The resources you will need for today's hands on workshop are available here.

A bit about me

Josh Marinacci


Researcher, Nokia

webOS DevRel @ Palm

GUI Engineer @ Sun

O'Reilly Author: Swing Hacks, Mobile apps in Java w/ GWT and Phonegap

Why make games?

Since we can't cover everything, this year I decided to focus on one area: games. Games are a great way to learn the HTML Canvas technologies because they touch on everything: graphics, sound, performance tuning, and mobile support. If you can do it with a game, then chances are you can do it in something else.

What is Canvas?

But before we dive into games, just what is HTML Canvas?

Canvas is a part of HTML 5, or now just HTML. It's an HTML element which is essentially just a box in the page that you can draw into with JavaScript. You can draw lines, shapes, images, and text. And in most cases it is now hardware accelerated, so drawing is very fast, at least on desktops.

Since Canvas is a pretty well polished HTML standard it is now supported by every major browser, even IE. In fact, IE 10 for desktop has blisteringly good performance on Windows 7 and 8. Canvas is also supported in virtually every smart phone browser, though it's not as fast as on desktop.

2D vs 3D

Canvas is mainly for 2D bitmap graphics. However there is also a 3D version of Canvas which goes by the name WebGL. As you might guess from the name, it is essentially OpenGL running in your browser. This makes it very fast but very tricky to program, as you are essentially writing C and shader code in JavaScript. Most people don't code WebGL by hand. They use a helper library like three.js. In the interest of time we won't cover WebGL today, but there is a section of the online book which walks you through creating a scene and loading up a 3d model.

Intro to Canvas

Before we start designing our game, lets look at a bit of canvas code.

Follow these examples from chapter 1.

Simple Canvas Examples

The ebook has more in-depth examples showing how to build bar and pie charts.

Bar and Pie Charts, Hands On Example

Why make games in canvas?

Now that we know what Canvas is, why should we make games using it instead of some other technology like C++ or Java? Probably the most compelling reason is that it's a standard and it runs everywhere. Virtually every platform has some form of Canvas support. While it's not as fast as native systems, there are some big resources at Apple, Google, Microsoft, and other places that are working very hard to make it faster and faster. I also think Canvas is great because you can code in JavaScript instead of C++. Again while it's not as fast to run, it's usually fast enough and the coding experience is so much better. I can whip up something in 30 minutes with Javascript that would take me hours in C++.

It's also important to mention that Canvas is an open standard. Not only does it mean that different platforms support the same features (roughly), because it is open you can implement it on new platforms as they come along. This gives Canvas a great future.

Lecture 1: Game Loop

Game Loop Hands On

Lecture 2: Audio

Audio Hands On

Lecture 3: Extras