TagCanvas - HTML5 Canvas Tag Cloud

Skip to:

TagCanvas is a Javascript class which will draw and animate a HTML5 canvas based tag cloud. I'm releasing it as open source under the LGPL v3 license. Below is an example.

Since the canvas is part of the HTML page, you can position things above or below it.

If this looks like a small static image, your browser does not support the canvas tag. Please try again using a different browser, or try to imagine text swirling around in response to the mouse position.

Cloud shape:

You clicked on: …nothing yet!

For the example above, I've replaced all the links with onclick handlers so that you won't end up on a different page when you click on any of the tags.

TagCanvas in Internet Explorer

The canvas element is not supported by Internet Explorer versions up to and including version 8. However, the tag cloud above should be working in IE thanks to the ExplorerCanvas Javascript include file that translates canvas functions into IE's VML. It is a bit slow, but it does work. Mostly.

At the time of writing you must use the latest trunk version of ExplorerCanvas, as the current version in the project downloads area does not have the required text output support.

Note again: the fading of image tags with distance does not work with the current version of Explorer Canvas. I've created a modified version of excanvas.js to make it work, which you can get from here. If you don't use image tags, or don't want images to fade with distance, then you should use the latest version from the Google code site linked above.

Internet Explorer 9 does support the canvas element, so excanvas.js is not required. The conditional comment required to include excanvas.js for earlier versions should look like this:

<!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script src="tagcanvas.min.js" type="text/javascript"></script>

Images

TagCanvas 1.3 was the first version to support image links - the first image found inside a link will be used instead of any text. Click the "Use image links" button below the example tag cloud above to see it in action.

Accelerometer / motion sensor

If you're using a laptop with a new-ish browser, take a look at the accelerometer page to see what happens when I find out hardware I didn't know I had is accessible from a browser.

Tag weighting

Starting in version 1.6 TagCanvas supports weighting of tags. Take a look at the TagCanvas with weighted tags page for more details and an example.

More examples

This is another canvas

And another canvas

Two more examples side-by-side. Clicking a tag in the first will reload the second with different content.

Icon 01 Icon 02 Icon 03 Icon 04 Icon 05 Icon 06 Icon 07 Icon 08 Icon 09 Icon 10 Icon 11 Icon 12 Icon 13 Icon 14 Icon 15 Icon 16 Icon 17 Icon 18 Icon 19 Icon 20

The TagCanvas script is available as a stand-alone version and as a jQuery plugin. Both are available as full source and minified versions in the table below.

If your website already uses jQuery, then the jQuery plugin version is the one for you. If you are using a different Javascript library or none at all, the stand-alone version will work by itself.

Unless you intend to modify the code of the TagCanvas script, you should use the minified version of the script - the minified versions are around 30% smaller than the uncompressed versions.

Version Full source Minified
Stand-alone version 2.3 tagcanvas.js tagcanvas.min.js
jQuery plugin version 2.3 jquery.tagcanvas.js jquery.tagcanvas.min.js

The minified versions of the files have been compressed using the Yahoo! YUI Compressor.

Download my modified version of Explorer Canvas here: excanvas.zip. The original source of Explorer Canvas is on the Google code site.

Projects using TagCanvas

Some developers have managed to do more with TagCanvas, so I'm happy to link to their work here. If you know of any other projects that use TagCanvas, please let me know and I'll add them to the list.

Help!

As usual, this code doesn't come with any guarantees. But if you get stuck, find any bugs or have suggestions for improvements, please contact me at the usual address, graham(at)goat1000.com.

« Back to top of page Installation instructions »