TagCanvas 2.4
Published
People have been asking me for more options for styling the tags for quite a long time, so TagCanvas 2.4 is my attempt to do just that. The example below demonstrates most of the new options that I have added.
As you can probably tell from the example, the new options allow drawing a
box with rounded corners around the tags. The bgColour option sets
the fill colour of the box, which you can also set to the string
“tag” to use the background colour from the original
<a> link element that the tag comes from.
The border around the tag is set using the bgOutlineThickness
and bgOutline options. The default thickness is 0, so there is no
outline drawn. The bgOutline option sets the colour of the outline,
which defaults to using the same colour as the text. Setting the option to the
string “tag” makes TagCanvas draw the outline using the text colour
of the original link. This is why the text in the example above is all red, but
the borders are in different colours, mostly a purple-blue since that is the
default link colour.
The bgRadius option sets the corner radius of the background
rectangle. The default value is 0, so you get sharp corners on the box. The box
fits quite tightly around the text by default, so there is a new
padding option to add some space between the text and the edge of
the background box.
For this example I have the outlineMethod set to
“colour”, but the block and outlined highlights also support
rounded corners now using the outlineRadius option. The buttons
under the example cloud will restart it using the selected highlight method so
you can see them for yourself.
All of the new options work with both text and image tags, though I have made
no attempt to support using them with the txtOpt option switched
off or in old versions of Internet Explorer. I'm sure it would be possible, but
I'm also fairly sure the resulting animation would be slow and ugly.
The new version is available from the TagCanvas page.