TagCanvas frequently asked questions

« Return to TagCanvas page

There are a short list of questions that I keep being asked about TagCanvas, so this page should help to answer most of them. If you have a question not covered here, please email me and I'll try to help you out.

How do I use TagCanvas in a responsive design?
How do I make TagCanvas work in Internet Explorer?
How do I use images for the tags?
How do I make the cloud move as soon as the page loads?

How do I use TagCanvas in a responsive design?

This is actually quite easy, just not immediately obvious. To start with, the width and height of the canvas must be set using the width and height attributes and values in pixels. This specifies the dimensions of the bitmap image that the browser uses to draw the canvas.

Of course, this means the the width and height are fixed, which is not what you want. To make the canvas resize with the browser, you must use CSS to set a relative width or height for the canvas is addition to the width and height attributes. The CSS settings will take precedence over the attribute values. Try width: 100% to take up the whole width of whichever element the canvas sits inside.

The example above will resize with the browser width, using the HTML and CSS below:

<div>
  <canvas id="resCanvas" width="680" height="300" style="width: 100%"></canvas>
</div>

This is all that you need to do - but you should choose the values to use for the canvas width and height to match the largest size that the canvas is likely to be. To see what happens when the width and height are too small, try this. The Javascript function in the link sets the width and height of the canvas to 1/4 of their full size, meaning that the browser must scale the canvas up to fit the space and resulting in the huge, pixellated text you see here.

Hold on - this doesn't work for IE 9 and IE 10!

Internet Explorer 9 and 10 don't resize the canvas evenly when using the CSS above, resulting in a squashed or stretched cloud. I haven't found a way to fix it just by using CSS, but it is easy enough to work around using some simple Javascript:

<script type="text/javascript">
function ResponsiveTCforIE(c) {
  var e = document.getElementById(c), rw;
  if(e && e.height && e.width) {
    rw = parseInt( document.defaultView.getComputedStyle( e ).getPropertyValue( 'width' ) );
    e.style.height = (rw * e.height / e.width) + 'px';
  }
}

if(document.all && document.addEventListener) {
  window.addEventListener('resize', function() {
    ResponsiveTCforIE('resCanvas');
  }, false);
  window.addEventListener('load', function() {
    ResponsiveTCforIE('resCanvas');
  }, false);
}
</script>

The ResponsiveTCforIE function is the important bit here, and all it does is resize the CSS height of the canvas to match its computed width based on the width and height attributes. The second half of the script adds event listeners to call the function when the page loads or when it is resized. The 'resCanvas' value passed to the function is the ID of the canvas element to be resized – so you should replace this with the ID of your canvas element!

In case you are wondering, the document.all && document.addEventListener test is for determining if the script is being run in IE 9 or IE 10. IE 10 is the last version to support document.all and IE 9 is the first version to support document.addEventListener, so the event listeners will only be used in those browsers.

(The extra spaces in the parseInt(...) line are not required – I've added them in here to allow line breaks when the browser window containing this page is resized.)

How do I make TagCanvas work in Internet Explorer?

There are two issues here - Internet Explorer versions up to 8 do not support the canvas element at all, and while versions 9 and 10 do support it, they have some odd foibles that mean you have to do things the right way to make TagCanvas work with them.

Earlier versions

Since versions of Internet Explorer up to 8 do not support the canvas element, getting TagCanvas to work involves adding something else to act like the canvas:

ExplorerCanvas: ExplorerCanvas is a Javascript shim that translates canvas drawing function calls into VML elements. It doesn't fully support everything that TagCanvas uses, but it can produce a reasonable approximation. Because it rebuilds all the VML elements on each frame it can be quite slow.; I have a version of excanvas.js that I modified to work better with image-based tags, which you can download here: excanvas.zip.
FlashCanvas: FlashCanvas is a Flash based solution to the IE canvas problem, which does work with TagCanvas to some extent. The cloud animation can be much smoother with FlashCanvas, though it does have problems with image tags (it doesn't scale them).

Whichever method you use, you must also make sure that you use a tag list source that is outside the canvas element - Internet Explorer will not look inside elements that it doesn't recognise, so putting the links inside means they can't be accessed.

IE9 and IE10

Internet Explorer 9 was the first version to support the canvas element, though it will only work when you have set the doctype correctly - IE9's “Quirks mode” does not support the canvas element.

The HTML5 doctype is easy to remember: “<!DOCTYPE html>”. Just make sure that it is the first thing in your HTML file.

<!DOCTYPE html>
<html>
  <head>
    <title>Using the HTML5 doctype</title>
  </head>
  <body>
    <canvas id=myCanvas width=400 height=400></canvas>
  </body>
</html>

Internet Explorer 10 works better than IE9 - the canvas element is supported whether you set the doctype or not. However, it does still suffer from the image loading problem described below.

How do I use images for the tags?

The simple answer is that you put the images inside your tag links:

<ul id="tags">
  <li><a href="/air/"><img src="images/air.jpg">Text inside</a></li>
  <li><a href="/earth/"><img src="images/earth.jpg">More text</a></li>
  <li><a href="/fire/"><img src="images/fire.jpg"></a></li>
  <li><a href="/water/"><img src="images/water.jpg"></a></li>
</ul>

TagCanvas checks for images inside the links, and uses them instead of any text. The “Text inside” and “More text” content inside the first two links in the example above will be ignored.

For the best results, the images must not be inside an element that has display: none set, and not inside the canvas element either.

This is more important for Internet Explorer than the other browsers, because IE does not load the images if they are not visible (and you will end up with a cloud full of 0-pixel by 0-pixel tags). FireFox, Chrome, Opera and Safari will all load the images if they are inside a hidden container, but will not proportionally scale them for you.

As an alternative to using display: none to hide your tags, you can position them outside the visible area, which does work in all browsers:

#tags {
  position: absolute;
  top: 0;
  width: 800px;
  left: -900px;
}

Image scaling

TagCanvas will get the dimensions to use for an image from the width and height that it has on the page. This means that you can set the image size using its width and height attributes, width and height CSS properties or max-width and max-height CSS properties.

You can then use the TagCanvas imageScale option to increase or decrease the size of all your images inside the cloud.

If you use CSS or the img element's width or height attributes to scale the image down, you can still use imageScale to scale the images back up again without any loss of detail. The original unscaled image is used to draw on the canvas each time.

How do I make the cloud move as soon as the page loads?

By setting the initial option. This option is an array containing two values - the amount of horizontal rotation and the amount of vertical rotation. Figuring out which numbers to use has been a case of trial-and-error up to now, so I've created the tool below to make it easier.

The TagCanvas cloud on the left is rotating using the initial value below.

Click and drag the arrow to change the direction and speed of rotation.

initial: maxSpeed:

The cloud above is using the default maxSpeed option - the initial X and Y parts are multiplied by maxSpeed, so if you are using a value different to 0.05 you should enter it into the maxSpeed input to make this cloud use the same value. Acceptable values are from 0.001 up to 5.

When you have the speed and direction you want, copy the value from the input to use as your initial option.

« Back to top of page Version history »