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