A canvas shadowOffset and shadowBlur example

function canvasReady() {
  draw(document.getElementById('canvas').getContext('2d'));
}
function draw(ctx) {
  ctx.textBaseline = "top";
  ctx.font = "24pt Arial";
  ctx.fillStyle = "red";
  ctx.strokeStyle = "blue";

  var text = setShadow(ctx, "black", 0, 0, 0);
  ctx.fillText("fillText: "       + text, 20, 20);
  text = setShadow(ctx, "black", 10, 0, 1);
  ctx.fillText("fillText: "       + text, 20, 60);
  text = setShadow(ctx, "black", 10, -10, 2);
  ctx.fillText("fillText: "       + text, 20, 100);
  text = setShadow(ctx, "black", 0, -10, 3);
  ctx.fillText("fillText: "       + text, 20, 140);
  text = setShadow(ctx, "black", -10, -10, 4);
  ctx.fillText("fillText: "       + text, 20, 180);
  text = setShadow(ctx, "black", -10, 0, 5);
  ctx.fillText("fillText: "       + text, 20, 220);
  text = setShadow(ctx, "black", -10, 10, 6);
  ctx.fillText("fillText: "       + text, 20, 260);
  text = setShadow(ctx, "black", 0, 10, 7);
  ctx.fillText("fillText: "       + text, 20, 300);
  text = setShadow(ctx, "black", 10, 10, 8);
  ctx.fillText("fillText: "       + text, 20, 340);
}
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(", ");
}