HTML5 canvas: рисовать прямоугольник вокруг текста?

Question

Я хочу иметь возможность нарисовать прямоугольник вокруг текстовых меток (полное имя человека). Поле не очень важно, но я не могу просто нарисовать прямоугольники фиксированного размера, потому что метки имеют разную длину. Как мне это сделать?

Вот код, который рисует текстовые метки:

var ctx = document.getElementById('map').getContext('2d');
for (i=0; i < num_people; i++) {
    var pos = get_position(i, num_people);
    ctx.fillText(names[i], pos.x, pos.y);
}

Answer 1

Размер нарисованного текста можно получить с помощью measureText () .

Answer 2

Полезные ссылки для текста на холсте:

• https://developer.mozilla.org/en/drawing_text_using_a_canvas (в частности часть textBaseline и симпатичная диаграмма)
• Как добавить рамку для текста HTML5 Canvas?