Web-Entwicklung: HTML5 Canvas

$(document).ready(function() { refreshWebsite(); linkify(); });
$(window).resize(function(){ $('canvas').remove(); refreshWebsite(); });
function refreshWebsite() {
 
        var ctx, r, maxR, line, speed, opacity, circles = [], counter = 1, drawInterval, time, colorblackwhite=false,
                headerHeight = $('header').height(),
                color = ['0,154,174', '0,188,86', '182,30,0', '255,220,36'];
 
        /* creating Canvas */
        var canvas_width = window.innerWidth;
        var canvas_height = window.innerHeight - $('header').height() - $('footer').height();
        $('footer')
                .before(&#39;<canvas height="'+canvas_height+'" id="canvasbg" width="'+canvas_width+'"></canvas>&#39;)
                .before(&#39;<canvas height="'+canvas_height+'" id="canvas" width="'+canvas_width+'"></canvas>&#39;);
 
        /* header menu click event */
        $(&#39;#infosArea&#39;).hover(function() {
                $(&#39;#infos&#39;).stop().slideToggle(200);
        }, function() {
                $(&#39;#infos&#39;).stop().slideToggle(200);
        });
 
        $(&#39;#canvas&#39;).mousemove(function(e) {
                draw(e);
        });
 
        $(&#39;#control a&#39;).click(function() {
                if(colorblackwhite == true) {
                        $(&#39;body&#39;).css(&#39;background&#39;, &#39;#fff&#39;);
                        colorblackwhite = false;
                } else {
                        $(&#39;body&#39;).css(&#39;background&#39;, &#39;#000&#39;);
                        colorblackwhite = true;
                }
                return false;
        });
 
 
        ctx = $(&#39;#canvas&#39;)[0].getContext(&quot;2d&quot;);
        ctxBg = $(&#39;#canvasbg&#39;)[0].getContext(&quot;2d&quot;);
        changeInterval();
        time = new Date().getTime() / 1000;
        init();
        function init() {
                setInterval(draw, 1000/60);
        };
 
        /* main draw function for each frame*/
        function draw(e) {
                if(typeof(e) != &#39;undefined&#39;) {
                        var timeNow = new Date().getTime() / 1000;
                        if(timeNow - time &gt; 1/100) {
                                time = timeNow;
                                var circle = new Circle();
                                generateNewValues(circle);
                                circle.x = e.pageX;
                                circle.y = e.pageY - headerHeight;
                                circle.maxR = getRandom(10,30);
                                circles.push(circle);
                        }
 
                } else {
                        clear(ctx);
                        if(counter % drawInterval == 0) {
                                var circle = new Circle();
                                generateNewValues(circle);
                                circles.push(circle);
                                if(counter &gt;= 180) { // 60 frames = 1 sekunde
                                        changeInterval();
                                        counter = 0;
                                }
                        }
                        counter++;
                        $.each(circles, function(key, obj) {
 
                                if(typeof(obj) != &#39;undefined&#39;) {
 
                                        obj.r *= obj.speed;
                                        if(obj.r &gt; obj.maxR) {
                                                obj.r = obj.maxR;
                                                obj.opacity *= obj.opacityLower;
                                        }
 
                                        if(obj.opacity &lt; 0.1) {
                                                obj.opacity = 0.05;
                                                drawCircle(obj, ctxBg, true);
                                                while (circles.indexOf(obj) !== -1) {
                                                        circles.splice(circles.indexOf(obj), 1);
                                                }
                                        } else {
                                                drawCircle(obj, ctx);
                                        }
                                }
                        });
                }
        }
 
        function changeInterval() {
                drawInterval = getRandom(5,25);
        }
 
        function clear(context) {
                context.clearRect(0, 0, canvas_width, canvas_width);
        }
 
        /*
         * x = X-Coordinate
         * y = Y-Coordinate
         * r = radius*2, width
         * o = lineWidth of outer border, percent % of new radius
         * outerColor = color of outer border
         * fillStatus = (boolean) fill
         * fillColor = color of inner background
         */
        function drawCircle(obj, context, isCanvasBg) {
                if(typeof(isCanvasBg) === &#39;undefined&#39;)
                        isCanvasBg=false;
                //if(isCanvasBg)
                        //context.restore();
                context.beginPath();
                context.shadowBlur = 10;
                context.shadowColor = &#39;rgba(&#39; + obj.outerColor + &#39;,1)&#39;;  
                context.arc(obj.x, obj.y, obj.r, 0, Math.PI*2, true);
                if(obj.fillStatus) {
                        var innerOpacity = obj.opacity * 0.1;
                        if(colorblackwhite &amp;&amp; !isCanvasBg)
                                innerOpacity *= 4;
                        context.fillStyle = &#39;rgba(&#39; + obj.fillColor + &#39;,&#39; + innerOpacity + &#39;)&#39;;
                        context.closePath();
                        context.fill();
                }
                context.lineWidth = obj.r * obj.line;
                context.strokeStyle = &#39;rgba(&#39; + obj.outerColor + &#39;, &#39; + obj.opacity * 1.0 + &#39;)&#39;;
                context.stroke();
                //if(isCanvasBg)
                        //context.save();
        }
 
                function getRandom(min, max) {
                        if(min &gt; max) {
                                tmp = max;
                                max = min;
                                min = tmp;
                        }
                        if(min == max) {
                                return min;
                        }
                        var r;
                        do {
                                r = Math.random();
                        }
                        while(r == 1.0);
                        return min + parseInt(r * (max-min+1));
                }
 
        function generateNewValues(obj) {
                obj.x = getRandom(0,canvas_width); /* random += bis max 20 oder -= bis max 20 in 1-steps */
                obj.y = getRandom(0,canvas_height); /* random += bis max 20 oder -= bis max 20 in 1-steps */
                obj.r = getRandom(1,40); /* random betweem 2 and 40, in 1-steps */
                obj.line = getRandom(3,20)/1000; /* random between 0.006 and 0.031, in 0.003-steps*/
                obj.speed = getRandom(102,112)/100; /* random between 1.02 and 1.12 */
                obj.maxR = getRandom(40,80); /* random between 30 and 150 */
                obj.opacity = getRandom(90,100)/100; /* random between 0.7 and 1 */
                obj.opacityLower = getRandom(960,990)/1000; /* between 0.91 and 0.96 */
                obj.fillColor = (getRandom(0,6) &gt; 1) ? getRandom(0,155)+&#39;,&#39;+getRandom(0,255)+&#39;,&#39;+getRandom(0,255) : color[getRandom(0, color.length-1)]; /* mostly random color without red or random key for predefined color  */
                obj.fillStatus = (getRandom(0,6) == 1) ? false : true; /* random true or false, mostly true */
                obj.outerColor = (getRandom(0,6) &gt; 1) ? getRandom(0,55)+&#39;,&#39;+getRandom(0,155)+&#39;,&#39;+getRandom(0,155) : color[getRandom(0, color.length-1)]; /* mostly random color without red or random key for predefined color */
        }
 
 
        function Circle() {
                this.x;
                this.y;
                this.r;
                this.line;
                this.speed;
                this.maxR;
                this.opacity;
                this.opacityLower;
                this.fillColor;
                this.fillStatus;
                this.outerColor;
        }
}
 
function linkify() {
        var supports3DTransforms =  document.body.style['webkitPerspective'] !== undefined || 
                                                                document.body.style['MozPerspective'] !== undefined;
        function linkify( selector ) {
                if( supports3DTransforms ) {
                        var nodes = document.querySelectorAll( selector );
                        for( var i = 0, len = nodes.length; i &lt; len; i++ ) {
                                var node = nodes[i];
                                if( !node.className || !node.className.match( /roll/g ) ) {
                                        node.className += &#39; roll&#39;;
                                        node.innerHTML = &#39;<span data-title="'+ node.text +'">&#39; + node.innerHTML + &#39;</span>&#39;;
                                }
                        }
                }
        }
        linkify(&#39;#control a&#39;);
}