Canvas: Проблема с текстом

Question

Есть два текста с одинаковым размером символов. Каждый текст стоит на своей фиксированной позиции, но стоит написать вместо Текст2 какое-либо другое слово, то Текст1 не сдвигается за ним. Так и должно работать. Но когда я пишу длинное слово, то Текст2 залезает на Текст1, тем самым перекрывает собой все что можно.

Пробовал прибавлять к позиции Текст1 длину от Текст2, но должного эффекта это не дало. Так же пользовался методом textAlign(). К сожалению это не тот эффект, который мне был нужен. В любом случае, если Текст2 будет коротким, то Текст1 не уменьшать свою позицию до позиции Текст2.

Так и не смог понять как сделать так, что-б Текст1 держался рядом с Текст2 не переступая его.

var cvs = document.getElementById('canvas');
var ctx = cvs.getContext('2d');

let txt = 'Текст1';

ctx.font = '16px Verdana';
ctx.textAlign = 'left';
ctx.fillStyle = 'red';
ctx.fillText('Текст2',105,55);

ctx.font = '11px Verdana';
ctx.textAlign = 'left';
ctx.fillStyle = '#6c6869';
ctx.fillText(txt,160+txt.length*0.5,55);

canvas {
    border: 1px dashed black;
}
body {
  background-color: rgb(54,57,63);
}

<canvas id='canvas' width='600' height='200'></canvas>

Answer 1

Можно померять ширину текста с помощью measureText.

var cvs = document.getElementById('canvas')
var ctx = cvs.getContext('2d')

var f1 = '16px Verdana'
var f2 = '11px Verdana'
var t1 = 'Текст111111'
var t2 = 'Текст2'
var t1w = textWidth(t1, f1)

fillText(t1, 105, 55, 'red', f1)
fillText(t2, 105 + t1w, 55, '#6c6869', f2)

function fillText(value, x, y, color, font) {
  ctx.font = font
  ctx.fillStyle = color
  ctx.fillText(value, x, y)
}

function textWidth(value, font) {
  ctx.font = font
  return ctx.measureText(value).width
}

canvas {
  border: 1px dashed black;
}

body {
  background-color: rgb(54, 57, 63);
}

<canvas id='canvas' width='600' height='200'></canvas>

БЛОГ НА HUSL

Canvas: Проблема с текстом

Ответы (1 шт):