HTML5 has this cool element called the CANVAS.
To checkout an elaborate tutorial on the canvas element, it would be better to go here
Very briefly, a canvas is a drawing surface which, although is part of the DOM, but can be placed anywhere in the DOM.
Exploiting this feature of the canvas element, I have implemented a Torch JS, which darkens the page and lights up the area around the mouse. I know, totally vain 🙂
To start,
1) Let us define our torch-bearer, the canvas :
<canvas id="torch" style="position: absolute; z-index: -10;" height="400" width="400"> </canvas>
2) Now to summon the darkness :
$('body').css('background','rgba(0,0,0,0.8)')
3) Where there is darkness, there shall be light :
var torch = $('#torch')[0]; var context = torch.getContext('2d'); context.fillStyle = 'rgba(255, 255, 0, 0.1)'; for(var i = 5; i < 100; i+=5) { context.arc(100, 100, i, 0, Math.PI*2, true); context.fill(); }
The for loop is a trick to render the torch realistically as a light source with varying intensity, instead of a crude yellow circle.
4) Now to lend it wheels :
$(document).mousemove(function(e){ _left = e.pageX - 50; _top = e.pageY - 50; if(_left<0) {left = 0;} if(_top<0) {top = 0;} if(_left+200 > max_right) {_left = max_right-200;} if(_top > max_bottom) {_top = max_bottom;} $('#torch').css('left',_left+'px'); $('#torch').css('top',_top+'px'); });
The torch canvas now follows the mouse movement. Knights used to ride horses, ye know!
You can bundle this as a Chrome Extension or a jQuery plugin and hide in your blanket and read away the whole night!
Looks something like this :
Sample code at github. To get it :
git clone git://gist.github.com/3999355.git gist-3999355