TagCanvas JS

TagCanvas jQuery plugin example

TagCanvas jQuery plugin example

TagCanvas is a Javascript class that will draw and animate an HTML5 canvas based tag cloud.  I will describe all the steps that are required to get a TagCanvas jQuery plugin example, using either the stand-alone or jQuery plugin version. In this example how to use TagCanvas JS using jQuery. If you are too impatient to read all of this, you can skip to Github page for full working source code.

TagCanvas jQuery plugin Installation Instructions

1. Include the TagCanvas jQuery plugin files into your page:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://www.goat1000.com/jquery.tagcanvas.min.js"></script>

 

2. Add a TagCanvas jQuery plugin to your page, with the required width and height:

<canvas width="500" height="500" id="myCanvas">
    <ul>
        <li><a href="https://en.wikipedia.org/wiki/HTML" target="_blank">HTML 5</a></li>
        <li><a data-weight="25" href="https://en.wikipedia.org/wiki/Cascading_Style_Sheets" target="_blank">CSS 3</a></li>
        <li><a data-weight="15" href="https://en.wikipedia.org/wiki/Sass_(stylesheet_language)" target="_blank">SASS</a></li>
        <li><a data-weight="15" href="https://en.wikipedia.org/wiki/Less_(stylesheet_language)" target="_blank">Less</a></li>
        <li><a data-weight="25" href="https://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a></li>
        <li><a data-weight="19" href="https://en.wikipedia.org/wiki/JQuery" target="_blank">jQuery</a></li>
        <li><a data-weight="19" href="https://en.wikipedia.org/wiki/JQueryUI" target="_blank">jQuery UI</a></li>
        <li><a data-weight="23" href="https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)" target="_blank">Bootstrap</a></li>
        <li><a data-weight="25" href="https://en.wikipedia.org/wiki/PHP" target="_blank">PHP</a></li>
        <li><a data-weight="19" href="https://en.wikipedia.org/wiki/MySQL" target="_blank">mySQl</a></li>
        <li><a data-weight="19" href="https://en.wikipedia.org/wiki/MySQL" target="_blank">DMS</a></li>
        <li><a data-weight="26" href="https://en.wikipedia.org/wiki/WordPress" target="_blank">Wordpress</a></li>
        <li><a data-weight="17" href="https://en.wikipedia.org/wiki/Git" target="_blank">Git</a></li>
        <li><a data-weight="17" href="https://en.wikipedia.org/wiki/WooCommerce" target="_blank">WooCommerce</a></li>
        <li><a data-weight="17" href="https://en.wikipedia.org/wiki/GitHub" target="_blank">Git Hub</a></li>
        <li><a data-weight="17" href="https://en.wikipedia.org/wiki/User_interface_design" target="_blank">UI Design</a></li>
        <li><a data-weight="17" href="https://en.wikipedia.org/wiki/User_experience_design" target="_blank">UX Design</a></li>
        <li><a data-weight="13" href="https://en.wikipedia.org/wiki/XML" target="_blank">XML</a></li>
        <li><a data-weight="13" href="https://en.wikipedia.org/wiki/Mailchimp" target="_blank">Mailchimp</a></li>
        <li><a data-weight="24" href="https://en.wikipedia.org/wiki/Adobe_XD" target="_blank">Adobe XD</a></li>
        <li><a data-weight="24" href="https://en.wikipedia.org/wiki/Adobe_Photoshop" target="_blank">Adobe Photoshop</a></li>
        <li><a data-weight="21" href="https://en.wikipedia.org/wiki/Node.js" target="_blank">Node JS</a></li>
        <li><a data-weight="19" href="https://www.npmjs.com/" target="_blank">npm</a></li>
    </ul>
  </canvas>

3. Initialise the TagCanvas jQuery plugin class with the id of the canvas element:

$(document).ready(function(){
      $('#myCanvas').tagcanvas({
          textColour : '#000000',
          outlineThickness : 0.5,
          outlineColour : '#fe0853',
          maxSpeed : 0.06,
          freezeActive:true,
          shuffleTags:true,
          shape:'sphere',
          zoom:0.9,
          noSelect:true,
          textFont:null,
          pinchZoom:true,
          freezeDecel:true,
          fadeIn:3000,
          initial: [0.3,-0.1],
          depth : 0.8
      });
})

 

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>

Starting the cloud TagCanvas JS

In this paragraph, I’m going to discuss a few reasons. Firstly, start functions start or restart the cloud animation. Secondly, The canvas ID must be provided for the stand-alone version, though the tag list ID and options arguments are optional.

When the tag list ID is not provided so TagCanvas will use any links it finds inside the canvas element for the tags – though this will not work in IE versions before IE9.

Using drag control

To enable drag controls, set the dragControl option to true. The dragThreshold the option can be adjusted to determine how many pixels the cursor must move before a click is judged to be a drag – by default it is set to 4 pixels.

Some of the other options work slightly differently when drag controls are enabled:

  • maxSpeed controls dragging sensitivity
  • decel controls deceleration when the cursor leaves the canvas and when the cloud is released from being dragged
  • reverse is ignored
  • freezeActive is ignored

The noMouse and lock = "xy" options both work normally but leaving the cloud immobile, and noSelect allows dragging but without the ability to click on a tag.

 

If have any problem with Installation This TagCanvas jQuery plugin example Just ping me a message.

Leave a comment

Your email address will not be published.

Do you want to hire SA Bappy?

Contact Me