In this post, I’m going to begin an examination of one of the hottest new features of HTML5, namely the Canvas element.
What is Canvas, anyway?
The best place to start is at the beginning, and that’s with an explanation of what Canvas actually is. Canvas is a new element that is part of the HTML5 specification, and can be added to your markup as simply as this:
As anyone following my blog or twitter feed could probably tell, in between HTML5 Web Camps and Game Camps, I’ve been doing a fair amount of work (and play) with .NET Gadgeteer. It’s a great platform for learning about electronics and microcontrollers, and since the code is in C# and based on the .NET Micro Framework, it’s familiar territory, at least on the software side.
Last Friday, I had the pleasure of presenting an HTML5 Game Camp with my colleague Lindsay Lindstrom. Since I was going to be in New York City for the day, I got in touch with Grant Kot, the creator of the terrific Grantophone app for Windows Phone 7, to see if we could connect in person. Grant was kind enough to stop by during the hackathon portion of the game camp, and while he was there, he gave an impromptu performance which my fellow DE Peter Laudati, got on video:
I wanted to take a moment to thank all the folks who came out to Columbia University for last Friday’s HTML5 Game Camp event that I presented with my colleague Lindsay Lindstrom. It was great to see so many folks interested in HTML5 and gaming, and in particular how many folks stuck around on a Friday evening to hack some code.
I promised to get my decks uploaded, so here they are:
I’m in the process of finalizing my preparations for tomorrow’s HTML5 Game Camp in New York City, and figured I’d share one of the functions I put together to help in the process of visualizing some of the different ways you can draw and manipulate objects on an HTML5 Canvas object. It’s a simple function called renderGrid, which takes as arguments the ID of the canvas you want to draw on, the pixel interval for the gridlines, and the color of the lines, and draws out a grid just like you’d see on graph paper. Call this function before you start drawing objects on your canvas, and you’ll have a nice reference grid to help you more easily visualize the layout. You can customize it to your liking by tweaking the pixel interval, and it’s relatively unobtrusive in your code.