Flashlight

<!-- Place the following code before </head> -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    (function() {

        // Button appearance
        var button_text = "LIGHTS";
        var button_color = "#ff0";
        var button_background = "#000";

        // Size of the beam.
        var radius = 450;

        // Color of the beam
        // format:  "red, green, blue"
        // example: for a red color put  var color = "255,0,0"
        // "" or false means no color
        var color = "";

        // Lower number = lighter beam
        // Only works when color is enabled
        var color_alpha = 0.25

        $(function() {
            var active = false;

            var trigger = document.createElement("div");
            $(trigger)
                .css({"position":"fixed", "top":"10px", "left":"10px", "padding":"4px", "z-index":1000, "background-color":button_background, "color":button_color, "cursor":"pointer"})
                .text(button_text)
                .click(function() {
                    active = !active;
                    $(canvas).css("display", (active?"block":"none"));
                    draw();
                })
                .appendTo(document.body);

            var canvas = document.createElement("canvas");
            $(canvas)
                .css({"position":"fixed", "top":"0px", "left":"0px", "pointer-events":"none", "z-index":999})
                .attr("width", window.innerWidth)
                .attr("height", window.innerHeight)
                .appendTo(document.body);

            ctx = canvas.getContext("2d");
            grad = ctx.createRadialGradient(0,0,0,0,0,radius);
            if (color) {
                grad.addColorStop(0,    'rgba('+color+','+color_alpha+')');
                grad.addColorStop(0.25, 'rgba('+color+','+(color_alpha+0.01)+')');
                grad.addColorStop(1,    '#000')
            } else {
                grad.addColorStop(0,    'rgba(0,0,0,0)')
                grad.addColorStop(0.25, 'rgba(0,0,0,0.01)')
                grad.addColorStop(1,    'rgba(0,0,0,1)')
            }

            ctx.fillStyle = grad;

            var mouse = {x:window.innerWidth/2,y:window.innerHeight/2}

            function draw() {
                if (active) {
                    ctx.setTransform(1, 0, 0, 1, 0, 0)
                    ctx.clearRect(0,0,canvas.width,canvas.height);
                    ctx.setTransform(1, 0, 0, 1, mouse.x, mouse.y);
                    ctx.fillRect(-mouse.x,-mouse.y,canvas.width,canvas.height);
                }
            }
            draw();

            $(window).resize(function() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
                ctx.fillStyle = grad;
                draw();
            }).mousemove(function(e) {
                mouse.x = e.clientX; mouse.y = e.clientY;
                draw();
            })
        })

    })()
</script>