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/