title: Centering text inside a canvas rectangle (button)
body: <p>Is there a dynamic way to center the text based on the height, width, X, Y, or a rectangle and the text length?  I'm having a bear trying to manually figuring out the X/Y coordinates for a button text.</p>
  
  <p>Ignoring that I'm using a method roundRect to make rounded edges, what is a good way to center the text?</p>
  
  <pre><code>ctx.lineWidth = 4;
  ctx.strokeStyle = "#000000";
  ctx.fillStyle = "#abc";
  roundRect(ctx, 10, 10, 100, 50, 10, true);
  ctx.font="20px Georgia";
  ctx.fillStyle = "#000000";
  var rectHeight = 50;
  var rectWidth = 100;
  var rectX = 10;
  var rectY = 10;
  ctx.fillText("Attack!",rectX+(rectWidth/2),rectY+(rectHeight/2));
  </code></pre>
  
  <p>See fiddle: <a href="http://jsfiddle.net/vu7dZ/1/" rel="noreferrer">http://jsfiddle.net/vu7dZ/1/</a></p>