HTML5画布 - 字母居中？

Question

知道如何在HTML5画布中完美居中一个字母吗？

我有这段代码来动画单词中的每一个字母。

interval = setInterval(function(){
  ctx.fillStyle = bgColor; 
  ctx.fillRect(0,0,128,128);
  var letter = $textInpt.val()[letterId];
  ctx.font = fontSize +"px "+font;
  ctx.fillStyle = fontColor;
  ctx.textAlign = "center";
  ctx.textBaseline="middle";
  var letterWidth = ctx.measureText(letter).width;
  ctx.fillText(letter, (canvas.width/2) - (letterWidth/4), (canvas.height/2) );
  letterId++;
  if (letterId>=$textInpt.val().length) letterId = 0;
},t);

这就是我得到的（字体Arial，字体大小80px）

FIDDLE ：https://fiddle.jshell.net/ec265s1x/1/

Answer 1

只需从水平位置计算中移除- (letterWidth / 4)：

ctx.fillText(letter, (canvas.width / 2), (canvas.height / 2));

小提琴：https://fiddle.jshell.net/ec265s1x/2/