I love symbol fonts. My new favorite is Font Awesome, an open source font with over 300 icons. Symbol fonts are great because they are pure vectors. They scale with everything else in your page and look pixel perfect on any DPI display, retina or otherwise.

However, sometimes I really just need an image. While working on an iOS application I wanted to use an image for a button. Finding decent iOS icons can be tricky, but Font Awesome matches the new iOS 7 look pretty well. Of course Font Awesome is a vector font and I need an PNG? What to do.. What to do..?

Well, I could have used Photoshop to rasterize that one glyph, but that's kind of a pain. Especially if I have to go through the whole process for multiple glyphs. What I want is a rasterizer that will generate an image for every glyph in a font. I hoped someone had already done this for Font Awesome, but I couldn't find one. Sometimes you've just got to do it yourself.

So this is my font slicer.

Please Click to view the demo.

The FontSlicer is a pure HTML5 app with everything done client side. I first tried to find a NodeJS server side rasterizer but in the end just went with HTML5 Canvas.

The really cool part is that you don't download a single image. Instead it renders a small PNG image for each glyph in memory using `Canvas.toDataURL` then streams them into a zip file that you download. This is thanks to the handy JSZip JavaScript library. Because everything is client side nothing is actually downloaded from the server after the page loads. I thought that was pretty nifty.

The call for proposals for OSCON 2013 just went out. OSCON is the one conference I try to speak at every year because the topics are so diverse and interesting. And being just up the road in Portland doesn't hurt either. However, I'm having trouble deciding what to submit. Too many things interest me. So I thought I'd consult the wisdom of the crowd. What do you want to see?

I plan to submit an update to my 3 hour HTML Canvas workshop since it is still a very relevant technology. It has been my most popular session, however, I don't just want to rehash what I did the last two years. What new things would you like to see? A game engine? Graphing algorithms? UI toolkits? More on Audio and Input?

Even if you don't plan to attend OSCON, the Canvas talk may still be relevant to you. The content from these sessions has turned into my popular open source ebook HTML Canvas Deep Dive. The book accounts for 75% of the hits on my blog, making it the most popular thing I've written by far. Any updates for OSCON 2013 will go into a new edition of the book.

I'm also open to other topics that fall within my area of expertise. The internet of things? Arduino hacking? Mobile app design? Usability? I'll even consider some Java stuff if that's what you want. What are your burning topics for 2013?

I'm very happy to announce that my interactive book, HTML Canvas: A Travelogue, is now available for the iPad. It includes the same great content as the webOS version: a complete introduction to HTML Canvas with interactive examples, for just $4.99. Several bugs have been fixed in this build, which are coming soon to webOS as well.

The app isn't retina tuned yet (since I don't have an iPad 3 yet) but since I'm using web technologies for everything it should look pretty good. Only a few of the screenshots will likely need updating.

If you find any bugs or would me to add more content, please let me know. Updates for all platforms will always be free.

Buy for Apple iPad

Buy for webOS TouchPad

This week at OSCON gave an updated version of my 3 hour Canvas tutorial. I think the session was well received. It was one of only a few tutorials that was completely sold out, 200 seats taken. But if you couldn't be one of those two hundred I don't want you to miss out.

I turned the content from last year's tutorial into an interactive eBook for the iPad and TouchPad. I did this partly to experiment with ebooks and partly to learn how to publish an app in the various stores. In thanks to my webOS fans I sold the TouchPad version for 99c while the iPad app costs 4.99$. It was a fun experiment but I have decided my real goal is not to make money, but rather to spread knowledge as widely as possible. So I have decided to make it all free as in beer and speech.

Yes, HTML Canvas Deep Dive is now 100% free

I have dropped the price of the existing apps to 0 (the TouchPad store may not yet reflect this). I have also published the book as a set of pages on the web so you can easily read and link to the book without installing an app. Note that the apps don't yet have the new content, just the webpage.

read it now

Even better, there is a bunch of new content I created for this year's OSCON. We now have new chapters on WebGL, WebAudio, and getUserMedia (webcam), as well as fixes for various existing chapters. Deep Dive is now over 20k word!

But, I need your help.

First, please spread the word about my book. I want it to be the definitive introduction to Canvas.

Second, I would love some help both with programming and design. I have created iOS and webOS versions of the book, but I need some help supporting Android, WinPhone / Win8RT, and PlayBook 2.0. I would also like some help from a web designer to improve the layout and font selection, especially on mobile devices.

Finally, please read the book and give me feedback. If you find spelling errors, code bugs, or an unclear description, please let me know. If you are interested in contributing new chapters I'd love that as well.

Working on this project has really been a labor of love. Thank you for your support.

Building Mobile Applications with Java Using GWT and PhoneGap

I'm happy to announce that my new book Building Mobile Applications with Java Using GWT and PhoneGap has been published in both print and ebook editions. While I love having a print edition, the ebook Kindle version, at $9.99 is half the price for the exact same content. Sure, you can't write on it with a marker, but the convenience and price is well worth it.

If you didn't catch it in one of my earlier blogs, Building Mobile Apps w/ Java, GWT, and PhoneGap is a shortish book (~80pgs) that gives you the good stuff and none of the fluff. GWT and PhoneGap are two great open source tools that, combined, let you use Java to make apps for non-Java platforms. This good gives you everything you need to know, starting with building a simple GWT app and compiling it for iOS, Android, and webOS. After we get familiar with the tools I'll walk you through some 3rd party libraries that make your apps feel more native. Then we will finish up with a 2D video game using the accelerometer and a physics library.

My goal was to give you everything you need to get started in as short a time as possible. You are busy people who need to get back to coding, so I don't want to waste your time. I think the finished work is right on target.

You can buy it here as well as download the source to the projects.

HTML Canvas : A Travelogue

I have also updated my self published app-book on HTML Canvas. It gives you a gentle walk through of what Canvas, how to use the APIs from drawing to pixel pushing, and then shows you how to build a simple game with 2D sprites and particle effects. The book also uses an experimental form of interactive code where you can change the values of variables in examples then see how the graphics update in real time.

I call this book an EverBook, meaning updates will always be free. The book itself is an app so if you already bought just check in your app catalog for the update. I've fixed a bunch of bugs, improved performance, and fleshed out a few sections. Also, stay tuned for a few more interactive features I've got up my sleeve.

You can buy the book here. $4.99 for iOS and $0.99 for webOS. (Shoutout to my webOS peeps!)

I mentioned a few days ago that I updated my Canvas Deep Dive ebook and dropped the price to free. But wait, there's more! I've also completely open sourced the book. My goal with Deep Dive was always to disseminate information as widely as possible. There is no better way to do that than giving it to the world.

The source to the book is now on GitHub here.
I've created a separate repo for the example code here.
The compiled web version of the book is here.

There are several reasons I think Canvas Deep Dive is different than the other canvas resources out there. First, it is comprehensive. Starting from chapter one the reader learns what canvas is, how it works, and the basic functions for drawing shapes. From there it moves on through charts, animation, pixel manipulation, WebGL with ThreeJS, WebAudio and finally a quick introduction to the experimental webcam API. Along the way the reader is walked through hands on exercises that ensure they understand the concepts.

Second: the book is interactive. Any text in a gray box has a glossary definition. The first chapter shows off interactive code snippets. Any number in red text can be dragged to change the value and the graphics are redrawn so the reader will directly see how this code changes the output. The hands on labs have inline demos so you can compare your code with the expected result.

Now that the source to the book is out there I need your help to make it better. Any contributions are welcome, from correcting spelling mistakes to writing new chapters. When the changes are committed the entire book will be rebuilt by my Hudson server here. Periodically I will be uploading new versions of the book as app to the iPad and TouchPad app stores. I'd also like help supporting Android tablets (I'm not much of an Android developer, I'm afraid). All pull requests are welcome.

Together we can make this the best way to learn HTML Canvas.


Thanks to my HTML Canvas Deep Dive at OSCON, .net Magazine asked me to write a tutorial for them. The topic was just something interesting with Canvas. I'm a huge fan of infographics, as well as .net Magazine, so I jumped at the chance to write for them. I recently discovered an amazing treasure trove of data at the World dataBank, so that formed the core of the article.

My tutorial will take you from drawing a few shapes using canvas to processing real data from CSV files, then finally adding some interactivity and sprucing up the graphics. It should take you about one hour to complete, and if you know basic JavaScript then you're all set. It was a lot of fun to write. I hope you enjoy it.

Read it now