HTML Canvas : text doesn't appear at center of circle
<p>I am trying to insert a text at the middle of a circle drawn with HTML Canvas, but its always appearing a little above the center. (I tried baseline, but it didn't work). I don't want to hard-coded the <code>fillText</code> co-ordinates.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = document.getElementById('completionStatus');

var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 200;

context.beginPath();
context.fillStyle = '#B8D9FE';
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fill();
context.strokeStyle = '#ffffff';
context.font = 'bold 130pt Calibri';
context.textAlign = 'center';
context.fillStyle = 'white';
context.fillText('70%', centerX, centerY);
context.stroke();</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="completionStatus" width="400" height="400"&gt;&lt;/canvas&gt;</code></pre>
</div>
</div>
</p>

<p>Here's a fiddle : <a href="http://jsfiddle.net/wku0j922/2/" rel="noreferrer">http://jsfiddle.net/wku0j922/2/</a></p>