A canvas shadow text example

<canvas id="canvas" width="360" height="360"></canvas>
<canvas id="canvas2" width="360" height="360"></canvas>
<canvas id="vmlcanvas" class="vml" width="360" height="360"></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.globalAlpha   = 1.0;
  ctx.font          = "24pt Arial";
  ctx.textBaseline  = "top";
  ctx.fillStyle     = "red";
  ctx.strokeStyle   = "blue";

  var text = setShadow(ctx, "gray", 0, 0, 0);
  ctx.fillText("fillText: "     + text, 10, 20);
  ctx.strokeText("strokeText: " + text, 10, 200);
  text = setShadow(ctx, "gray", 4, 4, 4);
  ctx.fillText("fillText: "     + text, 10, 60);
  ctx.strokeText("strokeText: " + text, 10, 240);
  text = setShadow(ctx, "pink", 4, -4, -4);
  ctx.fillText("fillText: "     + text, 10, 100);
  ctx.strokeText("strokeText: " + text, 10, 280);
  text = setShadow(ctx, "green", 4, 1, 1);
  ctx.fillText("fillText: "     + text, 10, 140);
  ctx.strokeText("strokeText: " + text, 10, 320);
}
function setShadow(ctx, color, blur, ox, oy) {
  ctx.setShadow(color, ox, oy, blur);
  return [color, ox, oy, blur].join(", ");
}