A canvas fontSize fillText example

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

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

  ctx.fillStyle     = "blue";
  ctx.textBaseline  = "top";

  var i = 0, v, dim, txt,
      ary = [6,7,8,9,10,11,12,14,16,18,20,24,28,32,36,40,48,58,64,72,84],
      iz = ary.length;
  for (; i < iz; ++i) {
    v = ary[i];
    txt = v + "pt;" + fillText;
    ctx.font = v + "pt Arial";
    ctx.fillText(txt, 10, i * 35 + 10);
  }
}
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();
  }
}