The Pixel Art Canvas

by Santosh

Pixel Art. Some time ago I came across an article titled “The Sketchbook of Susan Kare”. As an artist at Apple, Susan’s contribution to the computing world includes the world’s first proportionally spaced digital font and the first icons for the Mac’s revolutionary GUI. The article carried pages from her sketchbook depicting her raw icon sketches. As I stared away at these sketches, I realized that an artefact of digital culture – pixel art owes itself to the simple idea of coloring in squares in a grid.

At the time, I needed to turn around an ‘official letterhead’ for company business. To help make the letterhead more geeky, I toyed briefly with the idea of a logo based on pixel art and therefore the idea of pixel art creation online.

I took an honest crack at researching and writing this application myself while on vacation at the start of the year. It seemed like a fun and achievable goal to work towards. A good amount of time was spent learning my way through some of the challenges. As I started to debug a grid that I had rendered in Raphael.js I found the going to be difficult and after the vacation ended, progress slowed down to a halt.

Making Progress. After a good six months of having placed it on ice, I dove back into the idea. This time around I decided to change my approach and find a collaborator who could help me breakthrough. I scoured through odesk, local and online forums before I finally met with Meher. Meher found the idea to be interesting and while I was still mulling how we’d work together – he’d already put his js-foo to work and created a demo. For me, his drive and entrepreneurial attitude sealed the deal and we’ve now begun work on a raw version of the canvas together.

What We’ve Got. If you find the idea interesting you could, head on over to the public Pixel Art Canvas repository on Github. The code is available to you under the MIT Licence to setup and play with. If you’d like to see what we’ve accomplished so far, we have a live prototype. I’ll be the first one to admit that not all the glitches are out, so tread carefully.

As common wisdom goes, we’ve started on this idea with an end in mind. We want to put it out there and appeal to the time wasters and observe how they respond to puzzles based on pixels, perhaps custom mugshots and of course, digital art itself.

Before I forget, alphabet logos created in pixel art aren’t very appealing because of the monospacing problem I mentioned earlier. The simplest way was to just use a proportionally spaced pixelated font such as this one. I guess I owe Susan Kare a sincere thank you!

A pixelized version of a jet fighter created with

For more Pixel Art, follow the pinterest #pixel community-tag.