var canvas = document.querySelector('#canvas'),

    ctx = canvas.getContext('2d');

​

var w = 4,

    h = 3;

​

canvas.width = w;

canvas.height = h;

​

for (var i = 0; i < w * h; i++) {

  var y = Math.floor(i / w),

      x = i % w,

      fill;

​

  if (y == 1 || x == 1) {

    fill = '#ccc';

  } else {

    fill = 'white';

  }

  ctx.fillStyle = fill;

  ctx.fillRect(x, y, 1, 1);

}

​

var url = canvas.toDataURL('image/png');

​

var style = 'url(\'' + url + '\') no-repeat cover';

var bs = document.querySelector('body').style;

​

bs.backgroundImage = 'url(' + url + ')';

bs.backgroundRepeat = 'no-repeat';

bs.backgroundSize = 'cover';

bs.backgroundPosition = '50% 50%';