Making games with HTML5 Canvas
HTML5 Canvas Deep Dive
On Wednesday, 7/24 at OSCON 2013 in Portland, Oregon I was able to sit in on a great talk by Josh Marinacci (@joshmarinacci) a researcher from Nokia. The talk was called "HTML Canvas Deep Dive", and Josh covered a whole lot of information, from why making games is good, and why doing it with Canvas is better, down to some of the nitty gritty details on how it all comes together with new technologies available in modern web-browsers.
It was close to a 3 hour talk, so there was a ton of information, and I'm not going to be covering the technical stuff here in this article. However Josh still has up the material he used for the OSCON talk on his website, and I'd highly recommend taking a look for some deeper insights:
If you really like this stuff, I'd also highly recommend checking out Josh's full blown free e-book on his site:
Canvas is supported by every major web-browser currently, and there are a ton of smart phones out there that can take advantage of it as well and that number is ever growing.
So you might be thinking to yourself, why in the world would I want to learn how to make games in my web-browser? Well the simple answer is that games are typically fun, and when you're learning something new like HTML5 Canvas, it's good to start out with something you can get immediate enjoyable feedback from.
Here is a modified version of the game I made during the lecture, just to show you how cool this stuff really is!
Controls: L - Go right J - Go left K - Jump
The fun doesn't stop with games!
There are also so many applications with HTML Canvas outside of games, on Josh's site there are also tutorials for creating bar and pie charts for instance. You can use HTML Canvas to replace a lot of Flash style animations as well for better compatibility across devices, or even just use it to make text on your site that you don't want people to be able to copy (as it draws it instead of writes it to the screen).
If you've made it this far and still haven't checked out Josh's HTML Canvas site yet, I'd really recommend doing so now. There is no point in me duplicating all the great content he already has written up on this, I just wanted to help bring this cool new technology to light and let as many people know as possible!
We value your feedback!
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
new! - Enter your name and email address above and we will post your feedback in the comments on this page!