A canvas shadow stroke example

<canvas id="canvas" width="300" height="150"></canvas>
<canvas id="canvas2" width="300" height="150"></canvas>
<canvas id="vmlcanvas" class="vml" width="300" height="150"></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.shadowBlur = 1;
  ctx.shadowOffsetX = 5;
  ctx.shadowOffsetY = 10;
  ctx.shadowColor = "gray";
  ctx.lineWidth = 5;
  ctx.globalAlpha = 0.5;

  var grad1 = ctx.createLinearGradient(105,0, 200,100);
  grad1.addColorStop(0,    'yellow');
  grad1.addColorStop(0.25, 'red');
  grad1.addColorStop(0.75, 'blue');
  grad1.addColorStop(1,    'limegreen');
  ctx.xMissColor = "blue";
  ctx.strokeStyle = grad1;
  ctx.strokeRect(105,0, 100,100);

  var grad = ctx.createRadialGradient(50,50,10,50,50,50);
  grad.addColorStop(0,    'yellow');
  grad.addColorStop(0.25, 'red');
  grad.addColorStop(0.75, 'blue');
  grad.addColorStop(1,    'limegreen');
  ctx.xMissColor = "limegreen";
  ctx.beginPath();
  ctx.arc(50, 50, 50, 0, Math.PI*2, false);
  ctx.strokeStyle = grad;
  ctx.stroke();

  ctx.beginPath();
  ctx.arc(200, 50, 50, 0, Math.PI*2, false);
  ctx.strokeStyle = "gold";
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(0, 150);
  ctx.lineTo(300, 0);
  ctx.strokeStyle = "rgba(12%,34%,56%,0.4)";
  ctx.stroke();
}