How can I display letters using html table cells as colored pixels?

Question

Let\'s say I have an html table (50 x 50 cells) with a yellow background. I would like to use the background colors of the cells to print letters (A-Z) (e.g. some cells blue and

Answer 1

Use Canvas (Edit: only for the generation of the letter coordinates in the 50x50 grid, no usage of canvas afterwards).

• For each letter possible, print the char on a 50x50 html5/javascript canvas in black and white using something like: http://typeface.neocracy.org/examples.html

• Then access the canvas in each pixel to check if it black or white, and save it in multidimensional javascript arrays. getPixel from HTML Canvas?

• print the output and create javascript code or JSON object that saves those coordinates for your use.

After that you'll have all you need: the coordinates for each letter, and (bonus) with a font of your choice.

Answer 2

Create the cells with a loop such as:

for(var i=65;i<=90;i++) {
    console.log(String.fromCharCode(i));
 }

(65 is the char code for A, 90 for Z). in the loop, attach id with the char. something like "charA", "charB". Than you can access the fields searching the id <"char" + letter>.

if you know only the (x,y) in the 50x50 grid, calculate which letter it is with:

String.fromCharCode(65+y*50+x);

Or take the value of it from the elment itself

$(this).val();

Or from attribute you attach to it:

$(this).attr('letter')