A canvas text-shadow globalAlpha 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);

  ctx.globalAlpha   = 0.5;
  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", 1, 1, 4);
  ctx.fillText("fillText: "     + text, 10, 140);
  ctx.strokeText("strokeText: " + text, 10, 320);
}
function setShadow(ctx, color, ox, oy, blur) {
  ctx.shadowColor = color;
  ctx.shadowOffsetX = ox;
  ctx.shadowOffsetY = oy;
  ctx.shadowBlur = blur;
  return [color, ox, oy, blur].join(", ");
}