Super Sayan stuff with Canvas and CSS

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 SAIYAN 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;    
    background: black !important;
    text-align: center;    
    vertical-align: middle;
}
.container{
    padding: 50px;    
    margin: 50px auto;
    vertical-align: middle;
}

.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: -20px;
    left: -20px;
    width: 190px;
    height: 190px;
    z-index: -2;
}



.sayan:before{
    position: absolute;
    color: transparent;
    font-size: 150px;
    font-weight: bold;
    content: '悟'; /* Go Kanji from Goku -> 悟空 */
    top:0px;
    bottom:0;
    left:0px;
    right:0;
    opacity: 0.7;
    z-index: -1;
    
  
}


@keyframes animation
{
0% {text-shadow: 0 0 20px #fefcc9,
  10px -10px 30px #feec85,
  -20px -20px 40px #ffae34,
  20px -40px 50px #ec760c,
  -20px -60px 60px #cd4606,
  0 -80px 70px #973716,
  10px -90px 80px #451b0e;}
100% {text-shadow: 0 0 20px #fefcc9,
  10px -10px 30px #fefcc9,
  -20px -20px 40px #feec85,
  22px -42px 60px #ffae34,
  -22px -58px 50px #ec760c,
  0 -82px 80px #cd4606,
  10px -90px 80px  #973716;}
}


@-webkit-keyframes animation
{
0% {text-shadow: 0 0 20px #fefcc9,
  10px -10px 30px #feec85,
  -20px -20px 40px #ffae34,
  20px -40px 50px #ec760c,
  -20px -60px 60px #cd4606,
  0 -80px 70px #973716,
  10px -90px 80px #451b0e;}
100% {text-shadow: 0 0 20px #fefcc9,
  10px -10px 30px #fefcc9,
  -20px -20px 40px #feec85,
  22px -42px 60px #ffae34,
  -22px -58px 50px #ec760c,
  0 -82px 80px #cd4606,
  10px -90px 80px  #973716;}
}

JavaScript

4// 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 =...