Creating Commodore 64 style logos in Canvas

The year is 1993 and a young me spends quite some time in front of a Commodore 1901 colour screen, a C-64 and use Amica Paint V1.8 with my trusty Competition Pro Joystick to set and delete pixels.

One of the things I did a lot was fonts for scrollers and logo effects, like the ones here:

Fast forward to 2000 – a bit less younger me got his first PC and used Star Commander to move some of these fonts over to the PC to bring them on to the web. By now I develop in Perl and I write an online tool that allows you to create logos using the fonts:

A few years later, I re-wrote the generator in PHP. Well, seeing the very cool C64 yourself Canvas demo I thought I should now have a go at creating a pure client side version.

So here we go – check out Canvas Logo-O-Matic and get the source on GitHub

The way it works is described very well in this Canvas image cropping tutorial and I heavily documented the logogen.js file for you.

Basically the trick is to write a JSON map of all the char data – where a char starts and how wide it is and then crop it out of a single sprite sheet top copy one after the other into the Canvas.

Tags: c64, canvas, geek, html5