title: HTML5 rotate text around it's centre point
body: <p>I'm having some trouble rotating a piece of text in my canvas by it's centre point, here is my code to attempt my problem </p>
  
  <pre><code>var textPositions = context.measureText(this.Text);
  
      context.save();
  
      context.translate(this.XPos + (textPositions.width / 2), this.YPos);
      context.rotate( (Math.PI / 180) * this.RotateSpeed );
      context.font = this.FontSize + "px " + this.FontStyle;
      context.fillText(this.Text, 0, 0);
      context.translate(-(this.XPos + (textPositions.width / 2)), -(this.YPos));
  
      context.restore();
  </code></pre>
  
  <p>this.Text is just "Hello world!" 
  this.XPos = 65;
  this.YPos = 100,</p>
  
  <p>Here is a picture with the non-rotated text and rotated text,
  <img src="https://i.stack.imgur.com/o5QUo.png" alt="enter image description here">
  Am I working out the centre point wrong?</p>