gradient mask on mouse move

by Nick Hulea

HTML

<canvas id="canvas" />

CSS

* {
    margin:0;
    padding:0;
}
/* to remove the top and left whitespace */
 html, body {
    width:100%;
    height:100%;
}
/* just to be sure these are full screen*/
 canvas {
    display:block;
}
/* To remove the scrollbars */

JavaScript

var canvas;
var canvastmp = document.getElementById("canvas");
canvas = canvastmp.getContext("2d");
canvastmp.width = window.innerWidth;
canvastmp.height = window.innerHeight;

function trevor(pos) {
    canvas.clearRect(0, 0, canvastmp.width, canvastmp.height);
    var x = pos.clientX;
    var y = pos.clientY;
    canvas.fillRect(x-50, y-50, 100, 100);
}

function resizeCanvas() {
    window.addEventListener('mousemove', trevor, false);
}

resizeCanvas();

window.addEventListener('resize', resizeCanvas, false);