HTML5 canvas: Draw rectangle around text?

Question

I want to be able to draw a fitted rectangle around text labels (person's full name). The margin isn't terribly important, but I can't just draw fixed-sized rectangles because the labels vary in lengths. How do I do this?

Here's the code that draws the text labels:

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

Useful links for canvas text:

• https://developer.mozilla.org/en/drawing_text_using_a_canvas (in particular the part on textBaseline and the nice diagram)
• How to add a border on HTML5 Canvas' Text?