Getting Started With HTML 5, JavaScript And Canvas

For the past month I have been digging deep into HTML 5, especially building games in JS and Canvas. I have been fighting having to go back to JavaScript, especially since I have grown to fall in love with languages like Java and C#. It wasn’t until I went to Seb Lee-Delisle’s Creative HTML 5/JavaScript workshop here in NYC that my fate was sealed.

I’ve known Seb for a few years now and have been a big fan of his work even longer. One of the reasons I decided to take this workshop was a desire to become more familiar with the new concepts going on in HTML 5 revolving around Canvas and WebGL. Seb is a great presenter. If you have seen him at any of the hundreds of conferences he speaks at each year you already know what I’m talking about. Seb has a great way of simplifying complex concepts like “maths” (as he calls it) and making it approachable by design-centric developers like me. Granted, a lot of the math covered is common knowledge, or at least is to me because I have been a Flash developer for the past 10 years, but it was really great to see how all of my Flash skills still directly apply to all the new HTML 5 and JavaScript.

What I Learned

Seb’s workshop is action-packed with a ton of code samples and demos. Here are a few things we covered:

Particles. Yup, Seb is the Particle King. For the past few years, he has always shown off how versatile particle systems were in Flash. It was great to get a refresher course on how to do them with Canvas, and some of the techniques he showed off are simple yet powerful ways to achieve really rich visuals. Here are a few of my particle experiments:

After the basic introduction on how particles work, I quickly built a confetti fountain.

From there, I accidentally created a particle WiFi signal. A big part of the workshop revolves around exploration time.

Soon after the basic particle system introduction, we began working on more complex things like explosions. A great tip on how to get the trails is to repaint the canvas with a slightly transparent fill versus a full clear.

After particles, Seb went into more complex uses for drawing such as drawing trees. It may not sound very interesting at first, but it’s a key skill to learn because it teaches you recursion and how the rotation system works in Canvas. With Canvas, you actually rotate the entire coordinate system when you perform a rotation, kind of how it works in Processing. Seb does a good job of explaining this concept; it helps to think of it as a real canvas so you can rotate it to help make drawing easier. Canvas has a save and restore system so you can save the previous coordinate state, rotate to do your drawing, then restore it to the original state. This is probably the steepest learning curve when drawing with Canvas versus Flash’s system.

From there, we moved onto the building blocks of asteroids, which is a Seb staple from his Flash presentation days and probably the best real-world and fun thing do to with a drawing API. Here is my attempt at making some graphics for asteroids:

Seb presents you with round asteroids, and it’s your job to make them look more random and irregular. It takes awhile to get used to Canvas’s orientation system, but the best part of the exploration time is accidentally coming up with cool things.

Another cool exercise was creating a thruster effect for the ship. Seb has an interesting use for Modulus in order to control and reset the length of the flame as the thruster burns at full blast.

After asteroids, Seb goes into building a simple 3D engine and eventually into Mr. Doob’s Three.js, which is a great 3D engine for JavaScript. The highlight of the 3D presentation was seeing the speed difference between Three.js’s Canvas implementation versus the WebGL version. WebGL is a serious contender in the 3D space, and when/if other browsers actually implement it as well as Chrome has, it will be a very impressive contender to dethrone Flash. Unfortunately, or fortunately, depending on how you look at it, that day is very far away.

Conclusion

If you are at all interested in HTML 5 Canvas, JavaScript, and WebGL, I highly suggest checking out this workshop. It is really perfect for Flash developers looking to transition into the HTML 5 world, and you will be relieved at how much is actually the same. You may also be shocked, like I was, that most of this is old hat by now and hopefully you will be less de-motivated than I was to be revisiting all of these concepts after mastering them several years ago. Seb is a great presenter and probably one of the only people I know who is perfect at giving a class like this. Check out his site for the next workshop time/date/location, and if you want to see how the classes evolve, make sure you follow the #CreativeJS Twitter tag when a workshop is going on.

Subscribe To My Mailing List

Want to learn how to make a game? Not sure where to start? Even if you are a seasoned game maker there is still a lot you can learn from my free 15 page guide on how to build, release and market a game.

Simply sign up for my mailing list and also get access to great tips and advice on how to make better games. I promise to not spam your inbox!

Join Now