A canvas textAlign example

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

  // center pole
  ctx.beginPath();
  ctx.moveTo(w / 2, 0);
  ctx.lineTo(w / 2, h);
  ctx.strokeStyle = "SkyBlue";
  ctx.stroke();

  // setting
  ctx.font          = "32pt Arial";
  ctx.fillStyle     = "red";
  ctx.textBaseline  = "top";

  ctx.textAlign     = "start";
  ctx.fillText(ctx.textAlign, w / 2, 0);

  ctx.textAlign     = "left";
  ctx.fillText(ctx.textAlign, w / 2, 40);

  ctx.textAlign     = "center";
  ctx.fillText(ctx.textAlign, w / 2, 80);

  ctx.textAlign     = "end";
  ctx.fillText(ctx.textAlign, w / 2, 120);

  ctx.textAlign     = "right";
  ctx.fillText(ctx.textAlign, w / 2, 160);
}