var canvas = document.getElementsByTagName('canvas')[0],
    ctx = null,
    grad = null,
    body = document.getElementsByTagName('body')[0],
    color = 255;
    
if (canvas.getContext('2d')) {
  ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, 600, 400);
  ctx.save();
  grad = ctx.createRadialGradient(0,0,0,0,0,400); 
  grad.addColorStop(0, '#000');
  grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')');

  ctx.fillStyle = grad;
 
  // draw 600x600 fill
  ctx.fillRect(0,0,600,600);
  ctx.save();
  var site = document.getElementById('container');
  site.onmousemove = function (event) {
    var width = window.innerWidth, 
        height = window.innerHeight, 
        x = event.clientX, 
        y = event.clientY,
        rx = 400 * x / width,
        ry = 400 * y / width;
        
    var xc = ~~(256 * x / width);
    var yc = ~~(256 * y / height);
 
    grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 400); 
    grad.addColorStop(0, '#444');
    grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join(''));
    ctx.fillStyle = grad;
    ctx.fillRect(0,0,400,400);
  };
}