A canvas shadow createPattern example

<canvas id="canvas" width="150" height="150"></canvas>
<canvas id="canvas2" width="150" height="150"></canvas>
<canvas id="vmlcanvas" class="vml" width="150" 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
  }
  // create new image object to use as pattern
  var img = new Image();
  img.onload = function(){
    // create pattern
    var ptrn = ctx.createPattern(img,'repeat');
    ctx.shadowBlur = 15;
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = 10;
    ctx.shadowColor = "gray";
    ctx.beginPath();
    ctx.strokeStyle = ptrn;
    ctx.fillStyle = ptrn;
    ctx.lineWidth = 6;
    ctx.strokeRect(10,10,40,40);
    ctx.strokeRect(30,30,40,40);
    ctx.fillRect(50,50,40,40);
    ctx.fillRect(70,70,40,40);
  }
  img.src = 'images/wallpaper.png?' + (new Date).getTime();
}