Lightning effect with Canvas

All credits to: http://cssdeck.com/labs/xq2cpb8s

by AndreaLigios

HTML

<script src="http://jsdo.it/akm2/fhMC/js"></script>
<div class="container">
<div class="event standard">STANDARD EVENT <br/><br/>Blabla yada yada </div>

<div class="event standard">STANDARD EVENT <br/><br/>Blabla yada yada </div>

<div class="event sayan">
    SUPER SAYAN EVENT!
    <br/><br/>
    Blabla yada yada 
    <canvas id='c'></canvas>
</div>

<div class="event standard">STANDARD EVENT <br/><br/>Blabla yada yada </div>
    </div>

CSS

body {
    margin: 0;
    padding: 0;    
}

.event {
    width: 150px; 
    height: 150px;    
    background: #666;
    position: relative;
    color: white;
    display: inline-block;    
    margin: 10px;
    text-align: center;
    vertical-align: top;
    
    z-index: 1;
}

.sayan{
    opacity: 0.99;   
    background: white;
}
canvas {
    position: absolute;    
    top: -15px;
    left: -15px;
    width: 180px;
    height: 180px;
    z-index: -1;
    opacity: 0.7;
}

.container{
    padding: 15px;    
    background: black;
    border: 2px solid dodgerBlue;
    margin: 10px;
}

JavaScript

// forked from akm2's "Lightning Points (Lightning 2)" http://jsdo.it/akm2/amk0
/**
 * Using PerlinNoise class
 * Using Point class
 * @see http://jsdo.it/akm2/fhMC
 */

var DRAG_POINT_NUM = 12;
var DRAG_POINT_MAX_NUM = 18;
var CHILD_NUM = 2;
var BACKGROUND_COLOR = 'rgba(0, 15, 20, 0.4)';

// Color
var H = 195;
var S = 100;
var L_MAX = 85;
var L_MIN = 45;

var canvas;
var context;
var dragPoints = [];
var mouse = new Point();
var baseLine;
var lightningLine;

// alias
var random = Math.random;
var floor  = Math.floor;

function init() {
    document.body.style.backgroundColor = BACKGROUND_COLOR;
    canvas = document.getElementById('c');
    
    document.addEventListener('resize', resize, false);
    resize();
        
    var i;
    
    for (i = 0; i < DRAG_POINT_NUM; i++) {
        dragPoints.push(new DragPoint(canvas.width * random(), canvas.height * random()));
    }
    
    var baseNoiseOpts      = { base: 100000, amplitude: 0.6, speed: 0.02 };
    var lightningNoiseOpts = { base: 90, amplitude: 0.2, speed: 0.05 };
    var childNoiseOpts     = { base: 60, amplitude: 0.8, speed: 0.08 };
    
    baseLine      = new NoiseLine(8,  baseNoiseOpts);
    lightningLine = new NoiseLine(16, lightningNoiseOpts);
    for (i = 0; i < CHILD_NUM; i++) {
        lightningLine.createChild(childNoiseOpts);
    }
    
    // *** Debug
    baseLine.debug = true;
    // *********
    
    document.addEventListener('mousemove', mouseMove, false);
    document.addEventListener('mousedown', mouseDown, false);
    document.addEventListener('mouseup', mouseUp, false);
    document.addEventListener('dblclick', doubleClick, false);
    document.addEventListener('keydown', keyDown, false);
    
    setInterval(loop, 1000 / 30);
}

function resize(e) {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    context = canvas.getContext('2d');
    context.lineCap = 'round';
}

function mouseMove(e) {
    mouse.set(e.clientX, e.clientY);
    
    var hit =...