A canvas textAlign example

function canvasReady() {
  draw(document.getElementById('canvas').getContext('2d'));
}
function draw(ctx) {
    ctx.translate(-10, 5);
    ctx.scale(1.2, 0.8);
    ctx.rotate(5 * Math.PI / 180);

  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);
}