実行結果

コード

ctx.fillStyle = "black";
ctx.font = "28px 'Monotype Corsiva'";
/* 補助点・補助線を描画する関数 */
var draw_point_line = function(x, y) {
  var fs = ctx.fillStyle;
  /* 補助点 */
  ctx.fillStyle = "red";
  ctx.beginPath();
  ctx.arc(x, y, 3, 0, Math.PI*2, false);
  ctx.fill();
  /* 補助線 */
  ctx.strokeStyle = "red";
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(370, y);
  ctx.stroke();
  /* */
  ctx.fillStyle = fs;
};
/* textBaselineにtopをセット  */
ctx.textBaseline = "top";
ctx.fillText('textBaseline="top" 日本語', 10, 10);
draw_point_line(10, 10);
/* textBaselineにhangingをセット */
ctx.textBaseline = "hanging";
ctx.fillText('textBaseline="hanging" 日本語', 10, 60);
draw_point_line(10, 60);
/* textBaselineにmiddleをセット */
ctx.textBaseline = "middle";
ctx.fillText('textBaseline="middle" 日本語', 10, 110);
draw_point_line(10, 110);
/* textBaselineにalphabeticをセット */
ctx.textBaseline = "alphabetic";
ctx.fillText('textBaseline="alphabetic" 日本語', 10, 160);
draw_point_line(10, 160);
/* textBaselineにideographicをセット */
ctx.textBaseline = "ideographic";
ctx.fillText('textBaseline="ideographic" 日本語', 10, 210);
draw_point_line(10, 210);
/* textBaselineにbottomをセット */
ctx.textBaseline = "bottom";
ctx.fillText('textBaseline="bottom" 日本語', 10, 260);
draw_point_line(10, 260);