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)

скрипку: https://fiddle.jshell.net/ec265s1x/1/

Answer 1

Просто удалить - (letterWidth/4) из горизонтального положения вычислений :

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

Fiddle: https://fiddle.jshell.net/ec265s1x/2/