Last night I attended Rob Hawkes' first hack night, focusing on HTML 5 canvas. Ever since Rob first mentioned this idea, it was something which appealed to me and it did not disappoint. It was an enjoyable evening of learning and hacking, fuelled by a supply of pizza generously provided by Microsoft thanks to Ben Nunney and Martin Beeby.

The evening kicked off with Rob giving a talk on canvas, outlining what it is, what it can do and how do do it, along with background information and some discussion as to where it was going. Since I've not had a chance to play around with canvas up until this point, it was something I was particularly looking forward to having seen some of the awesome things which had been created using it. One thing which I picked up from Rob is the fact he wasn't trying to sell us canvas, but simply told it as it was and why he sees so much potential in it. And I definitely agree, it is a very cool technology which holds a lot of promise given that once IE 9 comes out, all the major browsers will have support.

Once the talk was over, we had a chance to talk and catch up with each other whilst we waited for the pizza to arrive, which it did after a little while. As you would expect, this was a big hit and the pizza soon disappeared.

Code: The Final Frontier

The remainder of the evening was spent on a practical workshop which Rob had prepared. We were eased into canvas by revisiting each of the things covered in the talk such as drawing shapes and lines, and moved on to over things such as text and more. We then moved on to a Rawkets-esque space scene where the canvas was sized to fill the browser viewport, given a gradient background and then stars were randomly drawn across the screen.

This may sound quite simple (and it is), but there were quite a few gotchas which we had to go through in order to have it work as you would hope. First of all, the stars were all the same size, which isn't particularly realistic. Having made a change to give a more natural effect (I pre-empted Rob on this one and was pleased to see his technique match mine to the letter), we then needed to deal with the issue of ensuring the stars were redrawn when the browser was resized. Again, this was quite simple but didn't give us quite the result you might want - each resize event caused the stars to be completely redrawn, including calculating the random positions. That gave a quite uncomfortable flickering effect where they jiggled around the screen during resizes. The solution to this was to have each star remember its own location, and it all went beautifully until we got to scaling. Essentially, we wanted to have the stars' positions scale to fit the browser window, so if a star was in the middle horizontally and near the top vertically, it remained in that position relative to the current shape of the browser window.

Going to Warp

An unforeseen side effect (even by Rob) of the code we had written was a strange tendency to 'warp' when enlarging the browser window. This had us all stumped, but only seemed to appear in WebKit browsers (Chrome at least). Firefox didn't seem to suffer this affliction. Needless to say, we were all baffled, and never did get to the bottom of it during the evening.

Having had some more time to play around with it, I have since discovered a fix. For some reason, using the innerWidth and innerHeight properties of the window object seemed to be the issue. Changing to use jQuery's width() and height() methods instead solved the problem. I am not sure whether this is some strange inconsistency or error in what the innerWidth/innerHeight gives back in WebKit/Chrome, or something else but it sorted it out and the stars now scale in and out perfectly whilst the browser resizes in both directions.

Feel free to check out my code (including the fix) from the evening which I've put up on GitHub. However, do bear in mind that this is experimentation and learning, and is a long way from being production-quality code as anything.

The Sky's the Limit

Overall, I feel the event went really well. On top of the good organisation and great content, what stood out for me was Rob's passion for the topic and willingness to engage in conversation. I asked him a couple of slightly difficult questions during the evening and it made for a great discussion-driven atmosphere. There was also an active Twitter presence for the event using the #bmthhack hashtag, which added to the evening.

I definitely look forward to more hack nights at Bournemouth, and have been inspired to dive more deeply into canvas to see what I can make it do, and where it might be a good fit.