A canvas shadow text direction example

<canvas id="canvas" width="360" height="400"></canvas>
<canvas id="canvas2" width="360" height="400"></canvas>
<canvas id="vmlcanvas" class="vml" width="360" height="400"></canvas>

function boot() {
  draw(document.getElementById('canvas').getContext('2d'));
  draw(document.getElementById('canvas2').getContext('2d'), 1);
  draw(document.getElementById('vmlcanvas').getContext('2d'));
}
function draw(ctx, disableShadowBlurAPI) {
  if (disableShadowBlurAPI) {
    ctx.xShadowBlur = 0; // Old Silverlight(ver1, ver2) rendering simulate
  }
  ctx.textBaseline = "top";
  ctx.font = "24pt Arial";
  ctx.fillStyle = "red";
  ctx.strokeStyle = "blue";

  var text = setShadow(ctx, 0, 0, 0, "black");
  ctx.fillText("fillText: "       + text, 20, 20);
  text = setShadow(ctx, 1, 10, 0, "black");
  ctx.fillText("fillText: "       + text, 20, 60);
  text = setShadow(ctx, 2, 10, -10, "black");
  ctx.fillText("fillText: "       + text, 20, 100);
  text = setShadow(ctx, 3, 0, -10, "black");
  ctx.fillText("fillText: "       + text, 20, 140);
  text = setShadow(ctx, 4, -10, -10, "black");
  ctx.fillText("fillText: "       + text, 20, 180);
  text = setShadow(ctx, 5, -10, 0, "black");
  ctx.fillText("fillText: "       + text, 20, 220);
  text = setShadow(ctx, 6, -10, 10, "black");
  ctx.fillText("fillText: "       + text, 20, 260);
  text = setShadow(ctx, 7,  0, 10, "black");
  ctx.fillText("fillText: "       + text, 20, 300);
  text = setShadow(ctx, 8,  10, 10, "black");
  ctx.fillText("fillText: "       + text, 20, 340);
}
function setShadow(ctx, blur, ox, oy, color) {
  ctx.setShadow(color, ox, oy, blur);
  return [color, ox, oy, blur].join(", ");
}