TagCanvas example pages

« Return to TagCanvas page

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.

« Back to top of page Options »

This site uses cookies - details here.