A canvas textBaseline example

function canvasReady() {
  draw(document.getElementById('canvas').getContext('2d'));
}
function draw(ctx) {
  var w = 500, h = 250;
  var fillText = "textBaseline";

  grid(ctx, w, h, 10, 5, "SkyBlue", "steelblue");

  // setting
  ctx.font          = "48pt Arial";
  ctx.fillStyle     = "green";

  ctx.textAlign     = "center";
  ctx.textBaseline  = "top";

  ctx.fillText(fillText, w / 2, 100);
  ctx.strokeStyle = "red";

  var dim = ctx.measureText(fillText);
  ctx.strokeRect((w - dim.width) / 2, 100, dim.width, dim.height || 75);
}
function grid(ctx, w, h, size, unit, color, color2) {
  var x, y, i, j;
  for (i = 0, x = size; x < w; ++i, x += size) {
    ctx.beginPath();
    ctx.strokeStyle = (i % unit) ? color : color2;
    ctx.moveTo(x, 0);
    ctx.lineTo(x, h);
    ctx.stroke();
    ctx.closePath();
  }
  for (j = 0, y = size; y < h; ++j, y += size) {
    ctx.beginPath();
    ctx.strokeStyle = (j % unit) ? color : color2;
    ctx.moveTo(0, y);
    ctx.lineTo(w, y);
    ctx.stroke();
    ctx.closePath();
  }
}