Ascii to Icon

Based on a post "Replacing Photoshop With NSString" seen on HN. I recommend you read that post first.

This takes the idea and extends it in javascript to provide the ctx.drawIcon(text,x,y,w) method.

Fork Download

I have extended the initial ruleset so that at larger sizes simpler ascii arts can be used.

The rules are:

  1. Symbols are 0--9 a--b A--Z
  2. Single symbol for dot
  3. Two of symbol for line
  4. Many of symbol of circle
  5. Run of symbols for shape:

Here is an interactive space you can tryout.

Your browser does not support the HTML5 canvas tag.

Load example:

There are two boolean properties added to the context ctx.iconAutoLineWidth and ctx.iconDebug. These are editable below.


Auto line width. Use the size of the 'grid' or use the context linewidth. Defaults to true.

Show debug lines if the grid size is greater than 5px. (this prevents drawing a black messy blob). Defaults to false

Width in px (0 for auto): Should be bigger than the columns of the text. Height is derived from the number of rows.


Great care has been given to ensure that the results are pixel aligned for nice crisp images.

Drawings are made to a canvas using the normal context methods. You can change the line drawing methods using the normal ctx.lineJoin and ctx.lineCap. As well as changing colour with ctx.fillColor and ctx.strokeColor which makes layering easier for multi coloured icons.

Width size set to auto the result should be pixel accurate. Sizes between 1 and the actual size might fail to render.