Javascript HTML5画布-字母居中？

你知道如何在HTML5画布上完美地将一个字母居中吗

我有这段代码来制作word中每个字母的动画

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）

提琴：

只需从水平位置删除

-（letterWidth/4）

：

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

---

小提琴手：

Ty，我的画布容器中有10px的边框，所以它会破坏我的偏移量，所以我添加了

-（letterWidth/4）

。现在正在工作，谢谢：）