如何使用JavaScript获取文本顶行的位置

Question

I am looking at a Daniel Earwicker's answer to "How can you find the height of text on an HTML canvas?".
It provides me with a way to get certain metrics on text height.

However what I am interested in is getting the metric for a black line below:

Is it possible to get it using this approach?
See http://jsfiddle.net/BL5nP (hardcoded black line).

HTML:

<canvas width="500" height="500"></canvas>

JavaScript:

// function from https://stackoverflow.com/questions/1134586/how-can-you-find-the-height-of-text-on-an-html-canvas/9847841#answer-9847841
var getTextHeight = function(font) 
{
    var text = $('<span>Ag</span>');
    text[0].style.font = font;

    var block = $('<div style="display: inline-block; width: 1px; height: 0px;"></div>');

    var div = $('<div></div>');
    div.append(text, block);

    var body = $('body');
    body.append(div);

    try 
    {
        var result = {};

        block.css({ verticalAlign: 'baseline' });
        result.ascent = block.offset().top - text.offset().top;

        block.css({ verticalAlign: 'bottom' });
        result.height = block.offset().top - text.offset().top;

        result.descent = result.height - result.ascent;
    } 
    finally 
    {
        div.remove();
    }
    return result;
};

var testLine = function(ctx, x, y, len, style) 
{
    ctx.strokeStyle = style; 
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x + len, y);
    ctx.closePath();
    ctx.stroke();
};

var ctx = $('canvas')[0].getContext('2d');
var x = 10;
var y = 10;

var font = '36pt Times';
var message = 'ABCD';

ctx.fillStyle = 'black';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.font = font;
ctx.fillText(message, x, y);

var w = ctx.measureText(message).width;
var h = getTextHeight(font);

testLine(ctx, x, y, w, 'red');
testLine(ctx, x, y + h.ascent, w, 'green');
testLine(ctx, x, y + h.height, w, 'blue');
testLine(ctx, x, y + 10, w, 'black'); // this line is what I am interested in

Answer 1

There is this small fontmetrics library that does the trick https://github.com/Pomax/fontmetrics.js

The only reliable method to get the ascent (top of letter l) is to simply draw the text on the canvas and count white lines until top boundary is visible (this is what the library above does).

There are couple of approximations by aligning inline spans and divs, but none of them gives reliable cross-browser results. Eg this one relies on getBoundingClientRect() and can be made to work in certain limited cases, but not in general: http://jsfiddle.net/Exceeder/rP7Jj/