TagCanvas centre drawing callback function

« Return to TagCanvas page

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.

Example canvas with centre callback

A cloud with animated centre

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.

« Back to top of page Frequently asked questions »