A Periodic Table Using HTML5 Canvas

Yes, I did it! To explore the graphic possibilities in HTML5, I reviewed my college chemistry where I always meant to memorize the Periodic Table of the Elements. You can see the results here. That is assuming you have a recent, capable browser.

I created the table using the new "Canvas" element which creates graphics on the fly using Javascript. This falls somewhere between the precision you get making a graphic in Photoshop and the convenience of putting something together quickly using HTML, CSS and Tables. For comparison purposes, the little color-code chart below the table was created using a simple HTML Table. If you print the page, you will probably have your background printing turned off so you will not get the colors in those notes. The Periodic Table itself, however, will keep its background colors just fine. At least that has been true of the printers with which I have tried it so far.

Each one of the squares in the Periodic Table is a separate canvas including the several large, blank areas containing notes. Although it looks like the table has one, big blank area, a separate blank Canvas is necessary for each row to keep spacing right. I did not try to incorporate the Canvases into a huge HTML table for spacing purposes. The whole idea was to get away from using tables for layout.

So far, I can either align the big blank areas to make boxes on the right line up perfectly, visually, or make them come out perfectly when printed, not both! In addition, there is a slight difference between Firefox and Explorer in the way they render the data, including the manner in which they send it to the printer. On an Android, although better than expected, the text which I had sized and placed so carefully on each Canvas, became slightly larger; this meant that occasionally a right-hand letter was cut off at the edge.

As for size, a screen shot of the chart saved as a medium jpg uses 253KB. I was able to get it down to 154KB using the lowest quality setting. It did save as a gif with 91KB. But the second two didn’t look at all good. The actual php file, which is only 138KB, looks better than any of the saved graphics.

Next Canvas project — Pie Charts!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>