This article has been a long time coming. The layout and mark-up were finished weeks ago and I have no better excuse for my tardiness than other projects getting in the way. With the Hack Night having taken place over a month ago I feel most people have already reported on the event with greater prowess than I could have managed, least of all Rob Hawkes himself. For this reason I haven't gone into to much detail about what canvas is in this write-up.
first some introductions
The HTML5 Canvas Hack Night was hosted / organized / created by Rob Hawkes (@robhawkes) with the help of Microsoft's Dreamspark programme (@bennuk) who, among other things, supplied the event with free pizza, thus winning over a room of eager programmers. Rob Hawkes is a growing star in the industry, his big break came in the form of his google balls logo remake which has led to a book deal on Foundation HTML5 Canvas. When you get a chance go play his MMO space shooter rawkets which is made with (you guessed it) Canvas.
the first html5 canvas hack night
The event was held on a cold and snowy December evening. When I say snowy I mean icy paths and that annoying black sludge on the roads. And when I say evening I mean night, seeing as it ran over past Midnight (with everyone more than happy to stay). Around 20 people sat behind their laptops macs (see pic) and listened to Rob give a short presentation on
the apple fanboy side of the room
Canvas and its future as a web technology. The very first slide of the presentation included this quote:
Canvas: The future of graphics on the Web
A bold statement to make, but one I found myself agreeing with by the end of the evening. After the presentation and a quick break to eat pizza it was time for a practical workshop, in which Rob helped us create a randomly generated space scene, which is in use right now as the background to this page. To prove it's Canvas, without looking at the source code, go ahead and refresh the page, I'l wait. Notice how the stars moved? Now re-size your browser, pretty cool right? Of course this is incredibly simple example of what Canvas can do, but I still got that kick you get when you make something with a new language (hello world?).
Rob definitely succeeded in inspiring the people in the room to start playing around with Canvas, including myself. Which is part of the reason I spent the extra time trying to figure out how to make it the background for this article. I would strongly suggest going to his website to view the slideshow and learn some more about this exciting new technology.
now its your turn
Below I have embedded all the code needed to create the space scene, the only thing not included is jquery, you can download that here. Once you have them all saved, stick them in the same folder and make sure all the file names match up to the ones referenced in the code below. Test it in the latest browsers: webkit, moz, and ie9 (I think) all support it. If you get stuck feel free to contact me via twitter @atavvy. Although I'm no expert on the Canvas side of things!
until next time...
In all it was a fun night and I can't for the next one some time this year. Thanks to everyone involved with the event. In the meantime I'll definitely be playing around with Canvas and look forward to seeing how it develops.