TagCanvas - HTML5 Canvas Tag Cloud
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
handlers so that you won't end up on a different page when you click on any of
TagCanvas in Internet Explorer
canvas element is not supported by Internet Explorer
versions up to and including version 8. However, the tag cloud above should be
that translates canvas functions into IE's VML. It is a bit slow, but it does
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:
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.
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.
Two more examples side-by-side. Clicking a tag in the first will reload the second with different content.
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.
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.
|Stand-alone version 2.5||tagcanvas.js||tagcanvas.min.js|
|jQuery plugin version 2.5||jquery.tagcanvas.js||jquery.tagcanvas.min.js|
The minified versions of the files have been compressed using the Yahoo! YUI Compressor.
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
- My WP-TagCanvas - a WordPress plugin by Петър Петров
- TagCloud html5 - a WordPress plugin by Björn Teichmann (link seems to be down at the moment)
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.