I am making a Discord bot and trying to display someone's level, I would like it to basically say "LEVEL 1" for example, but the distance between the word level and the actual level would change depending on the level they are on. So I am trying to offset the word a little, but when I use measureText(), it displays incorrectly. Code:
const levelNumber = '1';
const levelText = 'LEVEL';
ctx.font = '48px Shapirit';
ctx.fillStyle = '#FF1700';
ctx.textAlign = 'right';
ctx.fillText(levelNumber, 880, 96.8);
ctx.font = '22px Shapirit';
ctx.fillStyle = '#FF1700';
ctx.textAlign = 'right';
ctx.fillText(levelText, 880 - ctx.measureText(levelNumber).width - 20, 96.8);
Yes @Jay is right. You have to measureText
with the right font, if not you get the wrong results.
See sample below
function drawLevel(x, y, txt, num, style) {
ctx.font = '48px Shapirit';
ctx.fillStyle = style;
ctx.textAlign = 'right';
ctx.fillText(num, x, y);
w = ctx.measureText(num).width
ctx.font = '22px Shapirit';
ctx.fillStyle = style;
ctx.textAlign = 'right';
ctx.fillText(txt, x - w - 20, y);
}
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
drawLevel(200, 40, 'LEVEL', '999', '#FF1700');
drawLevel(200, 80, 'LEVEL', '11', '#0000FF');
drawLevel(200, 120, 'LEVEL', '1', '#00FF00');
<canvas id="canvas">