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

You can get the size of the drawn text with 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)
• http://stackoverflow.com/questions/1421082/how-to-add-a-border-on-html5-canvas-text