InMotion Hosting Support Center

HTML5 Canvas Deep Dive

HTML5 logoOn 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.

Lecture time

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:

HTML Canvas Deep Dive lecture

If you really like this stuff, I'd also highly recommend checking out Josh's full blown free e-book on his site:

HTML Canvas Deep Dive book

HTML Canvas

One new thing that is available in HTML5 is something called Canvas. A Canvas is essentially just a box on the page that you can draw on with JavaScript, and you can draw using things like lines, shapes, images, or text. In most cases Canvas is also harward accelerated, which means the drawing of these objects can be very fast, at least on desktops.

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!

Was this article helpful?

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Forum Login

You are NOT logged in. You can still browse our Support Center.

To participate within our Community Support Forum:

Post a Comment

Email Address:
Phone Number:

Please note: Your name and comment will be displayed, but we will not show your email address.

0 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?


Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail:
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!