TagCanvas 2.8
Published
TagCanvas 2.8 is quite a small update, only adding two options and some validation of a couple of the existing options. The canvas below uses both new options and the fixed code.
The first new option is imageRadius, and it cuts the corners off
your images to give a rounded effect. The option can be in pixels, or as a
percentage (enclosed in single or double quotes to make it a string). The example
cloud is using '50%' to make the images round (they are actually
128×128 squares).
The second of the new options is scrollPause, which pauses the
animation while the page is being scrolled. Some browsers (especially on mobile
devices) struggle to display the page when there is a lot of canvas animation
happening at the same time as the page is scrolling. This option allows you to
set a delay in milliseconds that TagCanvas will pause for when it receives a
window scroll event. The example cloud is using a value of 200, so you should
be able to notice the slight delay after the page has scrolled and before the
animation resumes. This option is disabled by default, though it should not do
any harm to enable it for all browsers.
Finally, the extra validation is for the outlineRadius and
bgRadius options. When I added the imageRadius option
I noticed that large values for the other radius options could cause the corner
arcs to be drawn overlapping and pointing in the wrong directions. The validation
makes sure that the corner radii are limited so that you will get semi-circular
ends on rectangular tags, or full circles on square tags. The example cloud uses
an outlineRadius of 100, which is enough to turn the outline into
a circle around the images.
The new version is available from the TagCanvas page.