TagCanvas example pages
To get you started, here are a couple of complete example pages, one for the stand-alone version of TagCanvas and one for the jQuery plugin version. To save copying and pasting, links to each file can be found below the source listings.
Complete example: stand-alone version
Here is the code for a full example page, using the stand-alone version of TagCanvas. It demonstrates passing in options and how to specify the list of tags to use.
<!DOCTYPE html>
<html>
<head>
<title>TagCanvas example</title>
<!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script src="tagcanvas.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function() {
try {
TagCanvas.Start('myCanvas','tags',{
textColour: '#ff0000',
outlineColour: '#ff00ff',
reverse: true,
depth: 0.8,
maxSpeed: 0.05
});
} catch(e) {
// something went wrong, hide the canvas container
document.getElementById('myCanvasContainer').style.display = 'none';
}
};
</script>
</head>
<body>
<h1>TagCanvas example page</h1>
<div id="myCanvasContainer">
<canvas width="300" height="300" id="myCanvas">
<p>Anything in here will be replaced on browsers that support the canvas element</p>
</canvas>
</div>
<div id="tags">
<ul>
<li><a href="http://www.google.com" target="_blank">Google</a></li>
<li><a href="/fish">Fish</a></li>
<li><a href="/chips">Chips</a></li>
<li><a href="/salt">Salt</a></li>
<li><a href="/vinegar">Vinegar</a></li>
</ul>
</div>
</body>
</html>
You can view the page here, or download it with right-click/"Save as" etc.
There are a couple of things to note about this example. First, it is using
the minified version of the tagcanvas script, tagcanvas.min.js.
Unless you are planning to modify the script to do something differently, this
is the version you should be using.
You should also be aware that the example expects the tagcanvas script
to be in the same directory as the HTML file. If you are being more tidy than
I am and keeping your Javascript files in a subdirectory, don't forget to
modify the src="" script attribute to point to where you put
it.
Complete example: jQuery plugin version
This is a similar example page, this time using the jQuery plugin version of TagCanvas.
<!DOCTYPE html>
<html>
<head>
<title>TagCanvas jQuery example</title>
<!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="jquery.tagcanvas.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
if(!$('#myCanvas').tagcanvas({
textColour: '#ff0000',
outlineColour: '#ff00ff',
reverse: true,
depth: 0.8,
maxSpeed: 0.05
},'tags')) {
// something went wrong, hide the canvas container
$('#myCanvasContainer').hide();
}
});
</script>
</head>
<body>
<h1>TagCanvas jQuery example page</h1>
<div id="myCanvasContainer">
<canvas width="300" height="300" id="myCanvas">
<p>Anything in here will be replaced on browsers that support the canvas element</p>
</canvas>
</div>
<div id="tags">
<ul>
<li><a href="http://www.google.com" target="_blank">Google</a></li>
<li><a href="/fish">Fish</a></li>
<li><a href="/chips">Chips</a></li>
<li><a href="/salt">Salt</a></li>
<li><a href="/vinegar">Vinegar</a></li>
</ul>
</div>
</body>
</html>
This page is available to see working (or download) here.
The jQuery version of the page is almost identical to the stand-alone
version. The tagcanvas.min.js file has been replaced with
jquery.tagcanvas.min.js and the main jQuery script has
been added before the TagCanvas script. The main jQuery file must come first
- plugins need something to plug into!
This time the canvas is started using the jQuery
$(document).ready() event handler instead of using
window.onload, though for these examples it shouldn't make any
difference. If the page had contained images, using window.onload
would have meant the canvas not starting until the images had loaded, whereas
$(document).ready() happens earlier in the loading process.