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.
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
Two more examples side-by-side. Clicking a tag in the first will reload the second with different content.
Downloads
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.11 | tagcanvas.js | tagcanvas.min.js |
| jQuery plugin version 2.11 | jquery.tagcanvas.js | jquery.tagcanvas.min.js |
The minified versions of these files have been compressed using Minify.
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.
- fzTagPlugin - a symfony plugin by Grzegorz Śliwiński
- UMI 3D Tag Cloud - a Joomla module by Thomas Venturini
- TagCanvas module - a Drupal module by CK Ng
- Tag Cloud HTML5 - a Gallery 3 module by Shad Laws
- simpletagcanvas - an alternative Drupal module by Andre Langner
- Canvascloud - a Magento extension by team in medias
- Word Count Tool - a word counter by Hai Nguyen Hoang
- Custom tt_news Tagcloud - a TYPO3 extension by Pierre Arlt
- 3D WP Tag Cloud (M/S) - WordPress plugins by Peter Petrov
- TagCloud html5 - a WordPress plugin by Björn Teichmann (link seems to be down at the moment)
- Tag Cloud Plugin - a SunHorizon Wiki plugin
- coreBOS - business software
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.