TagCanvas centre drawing callback function
Skip to:
Several people have asked me how to draw an image or something else in the middle of the cloud. Previously, I have had to point them to the source code and say where to add in their own drawing code, but now there is an option for drawing in the centre of the cloud without editing the TagCanvas script.
Using the centreFunc option
The centreFunc option, added in version 1.19, allows you to
create your own callback function to draw on the canvas between the front and
back tags. The callback function parameters are shown here:
function Callback(context2D, width, height, centreX, centreY) {
// your code here
}The arguments are:
- context2D
- The HTML Canvas 2D Context, as described here
- width
- The canvas width in pixels
- height
- The canvas height in pixels
- centreX
- The cloud centre point X-coordinate
- centreY
- The cloud centre point Y-coordinate
In case you are wondering why you need the centre point when you know the
width and height, the offsetX and offsetY options
can be used move the centre point away from the actual centre of the canvas -
centreX and centreY take this into account.
Example callback function
As an example, the callback function that draws the rotating square in the centre of the cloud above is shown here:
function RSquare(c, w, h, cx, cy) {
var d = ((new Date).getTime() % 10000) * Math.PI / 2500;
c.setTransform(1, 0, 0, 1, 0, 0);
c.translate(cx, cy);
c.rotate(d);
c.globalAlpha = 1;
c.fillStyle = '#000';
c.fillRect(-50, -50, 100, 100);
c.fillStyle = '#fff';
c.fillRect(-40, -40, 80, 80);
c.fillStyle = '#000';
c.fillRect(-30, -30, 60, 60);
c.fillStyle = '#ff0';
c.fillRect(-20, -20, 40, 40);
c.beginPath();
c.moveTo(0, 0);
c.arc(0, 0, 15, 0, Math.PI / 2, 0);
c.lineTo(0, 0);
c.arc(0, 0, 15, Math.PI, 3 * Math.PI / 2, 0);
c.fillStyle = '#000';
c.fill();
}
// set the centreFunc option:
TagCanvas.Start('exampleCanvas', 'extags', { centreFunc: RSquare });
The callback function is called “RSquare”, and I've given the function parameters shorter names to save me some typing. Most of what the function does should be fairly obvious, but there is one line at the start that might seem odd:
c.setTransform(1, 0, 0, 1, 0, 0);
This line resets the transformation for the canvas to the identity matrix - in other words, it clears the scaling and translation that were set by the last tag to be drawn. If I had missed this line out, the rotating square would be positioned relative to the tag that is nearest to (and below) the centre of the cloud. That could be useful for something, but not for my rotating square.
If you know something about matrices and geometry, then you might realise
that the c.translate(cx, cy) and c.rotate(d) lines
could have been amalgamated with the c.setTransform(...) line.
I decided against doing it that way to make it more obvious how the function
works, but you can do it that way if you prefer.
The callback function is called once on each frame of the cloud animation, so you should try to make it as simple as possible. If there is a Javascript error in your function, TagCanvas will pop up an alert showing the error and not run the function again until you restart it.
Using the centreImage option
If all you really want to do is add an image in the middle of the cloud, version 2.7 of TagCanvas added a new option to do just that:
options['centreImage'] = 'images/cube001.png';
The image file location is relative to the page from which you are running TagCanvas. TagCanvas will load the image and position it in the middle of the canvas at its native size.
If the image does not display, look in your browser's Javascript console - there may be an error message to help you figure out why it did not work.