Infographics with Canvas

So, it's no secret that I'm a great admirer of David DeSandro's work. He does some amazing things with HTML, CSS and JavaScript – some of which HTML never was meant for (like drawings and typefaces in pure HTML/CSS).

However, this time I was wondering how he did his story-line type portfolio, so I decided it was about time I got to learn <canvas> anyway, and recreated the effect on an old illustration.

The effect is actually quite cleverly built, by creating the points and pop-up tips in pure CSS, which also creates a great fallback for non-canvas & no-JS visitors.

However, you do need some presentational mark-up to create the tip-box corners and interest point indicators. The JavaScript (using jQuery) then finds the relevant point positions and calculates the bezier curvers from their position.

Childish Agitation Explained

This illustration was done in mid 2009, I think, and I'm actually still quite pleased with it.

• Postwork in Photoshop

  The illustration was mainly done in Illustrator, but I did some post-work in Photoshop.

• Cheating with free shapes

  The seagulls were added as an afterthought and I haven't actually drawn them myself - they're from a free pack I had lying around. I think the pack came from VectorTuts.

• Fat fonts and 3D

  The letters were done with Dubtronic and then exploded into 3D using Illustrators Bevel & Emboss capabilities. The 3D shapes were then cut apart into individual shapes and customized. I'm particularly happy with the second I and the last H.