Untitled

<!DOCTYPE html>
<html>
  <head>
    <title>TagCanvas example</title>
    <!--[if lt IE 9]><script type="text/javascript" src="http://www.goat1000.com/tagcanvasjs"></script><![endif]-->
    <script src="http://www.goat1000.com/tagcanvas.js?1.14" type="text/javascript"></script>
    <script type="text/javascript">
      window.onload = function() {
            $ = document.getElementsByTagName("canvas");
            try {
                for(x in $) {
                    if($[x].id.indexOf("myCanvas") !== -1) {

                        y = $[x].id.match(/^myCanvas(\d+)$/)[1];

                        TagCanvas.Start('myCanvas'+y,'tags'+y,{
                                textColour: '#ff0000',
                                outlineColour: '#ff00ff',
                                initial: [0.3,-0.3],
                                reverse: true,
                                decel: 1.0,
                                depth: -0.8,
                                freezeActive: true,
                                maxSpeed: 0.05
                            }
                        );

                        TagCanvas.depth = 0.92;
                        TagCanvas.pulsateTo = 0.6;
                        TagCanvas.initial = [0.1,-0.1];
                        TagCanvas.decel = 0.98;
                    }
                }
            } 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="myCanvas1" style="background-image: url('http://touchingtips.files.wordpress.com/2010/08/heaven_s_rays1.jpg');">
        <p>Anything in here will be replaced on browsers that support the canvas element</p>
      </canvas>

      <canvas width="300" height="300" id="myCanvas2" style="background-image: url('http://touchingtips.files.wordpress.com/2010/08/heaven_s_rays1.jpg');">
        <p>Anything in here will be replaced on browsers that support the canvas element</p>
      </canvas>

      <canvas width="300" height="300" id="myCanvas3" style="background-image: url('http://touchingtips.files.wordpress.com/2010/08/heaven_s_rays1.jpg');">
        <p>Anything in here will be replaced on browsers that support the canvas element</p>
      </canvas>

      <canvas width="300" height="300" id="myCanvas4" style="background-image: url('http://touchingtips.files.wordpress.com/2010/08/heaven_s_rays1.jpg');">
        <p>Anything in here will be replaced on browsers that support the canvas element</p>
      </canvas>
    </div>
    <div id="tags1">
      <ul>
        <li><a href="#">Luz</a></li>
        <li><a href="#">Céu</a></li>
        <li><a href="#">Luzeiros</a></li>
        <li><a href="#">Firmamento</a></li>
      </ul>
    </div>

    <div id="tags2">
      <ul>
        <li><a href="#">Cereja</a></li>
        <li><a href="#">Laranja</a></li>
        <li><a href="#">Pêra</a></li>
        <li><a href="#">Mamão</a></li>
      </ul>
    </div>

    <div id="tags3">
      <ul>
        <li><a href="#">Caneta</a></li>
        <li><a href="#">Lápis</a></li>
        <li><a href="#">Apontador</a></li>
        <li><a href="#">Grafite</a></li>
      </ul>
    </div>

    <div id="tags4">
      <ul>
        <li><a href="#">Que isso</a></li>
        <li><a href="#">Novinha</a></li>
        <li><a href="#">Que isso</a></li>
        <li><a href="#">Gordinha</a></li>
      </ul>
    </div>
  </body>
</html>