CODEWITHSUNDEEP
javascripthtmlcanvas
Skodsgn
Skodsgn

Reputation: 981

HTML5 canvas - letter centering?

Any idea how to perfect centering one single letter in HTML5 canvas?

I have this code to animating every single letter from 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);

And this is what i got ( Font Arial, font size 80px )

enter image description here

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

Upvotes: 0

Views: 51

Answers (1)

Paul DS
Paul DS

Reputation: 859

Just remove the - (letterWidth / 4) from the horizontal position compute :

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

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

Upvotes: 2

Related Questions