This is Words and Buttons Online — a collection of interactive #tutorials, #demos, and #quizzes about #mathematics, #algorithms and #programming.

A picture is worth a thousand tags

Ok, here's an idea. Let's say you want to have a nice diagram with both graphics and numbers. Something between a picture and a table. The usual way to make it would be to draw numbers on an image and display that. But there is an alternative route. You can first turn your picture into a table, and then populate this table with your data.

Here is a canvas. It starts from a test table. Click the “canvas to textarea” button and the text area will get populated by the table's source code. There will appear an example of the table below the area, too. Click the “add text to the test card” and the color names will appear on the test card. These will be real HTML test. You can copy them right from the image. Since it's really not an image but a table. Something in between anyway.

You can load your own picture, or paste one from the clipboard by pressing Ctrl+V, but the text adding thing would not work with it anymore.

This technique lets you chimerize tables and images just right but, on the downside, this is a terribly inefficient way to encode pictures. I'm planning to use on this site for plots and diagrams. I already had a need for that and went for drawing simple plots with canvas' turtle graphics which is a little tedious. But if turtle graphics appears to be more economical, I might still stick to that.

After all, Words and Buttons is all about instant-loading self-sufficient small pages.