Effects: RGB shift, Scan Lines, TV Shine, TV noise

CANVAS RETROFFECT

/* 
* SCRIPT BY WILLIAM LIMA
* NAME: CANVAS RETROFFECT
* DATE: 08/02/2015
* LANGUAGE: JAVASCRIPT
* USAGE: draw_rgb_shift(CanvasElement,EnableRgbShift,EnableScanLine,EnableShine,EnableTvNoise)
* USE THE FUNCTION INTO ### AN ANIMATION FRAME ### BUT CREATE IT OUTSIDE
*/
var room={height: canvas.height,width: canvas.width,currentTime:0}
function draw_rgb_shift(canvas,rgbshift,scanline,shine,noise){
    //CHANGE VALUES
    var RGBSHIFT,SCANLINE,SHINE,NOISE;
    RGBSHIFT={
        amp:4,
        screenStep: 2
    };
    SCANLINE={
        lineHeight:2,
        lineColor: '#000000',
        lineAlpha: 0.4
    };
    SHINE={
        shineHeight: 200,
        shineColor: "#FFFFFF",
        shineAlpha:0.10
    };
    NOISE={
        noiseJump: 2,
        noiseColor: '#000000'
    };
    //END
    var _ctx;
    _ctx=canvas.getContext('2d');
    if (rgbshift==true) {
        function f(argument0){
            return (Math.sin(argument0/5)*2 + Math.sin(argument0*Math.PI) + Math.sin(argument0*5-2) + Math.sin(argument0/2) + (argument0 % Math.PI) - (argument0 % 4))/5;
        }
        var cd = _ctx.getImageData(0, 0, elem.width, elem.height);
        var Origin = cd.data;
        var imgData = _ctx.createImageData(elem.width, elem.height);
        var Destiny = imgData.data;
        var fa = {};
        var lin = (cd.width * 4);
        var amp = RGBSHIFT.amp * lin;
        var fn = (room.currentTime / 3).toFixed(1);
        fa.r = Math.ceil(f(fn / 1.7 + 9));
        fa.g = Math.ceil(f(fn / 1.5 + 2));
        fa.b = Math.ceil(f(fn / 1.2 + 3));
        for (var i = 0; i < Origin.length; i += 4*RGBSHIFT.screenStep) {
            fa.rr = i + (fa.r * amp);
            fa.gg = i + (fa.g * amp) + 1;
            fa.bb = i + (fa.b * amp) + 2;
            if (fa.rr > 0 && fa.rr < Origin.length - 1)Destiny[fa.rr] = Origin[i];
            if (fa.gg > 0 && fa.gg < Origin.length - 1)Destiny[fa.gg] = Origin[i + 1];
            if (fa.bb > 0 && fa.bb < Origin.length - 1)Destiny[fa.bb] = Origin[i + 2];
            imgData.data[i + 3] = 255;
        }
        _ctx.putImageData(imgData, 0, 0);
    }
    if (scanline==true) {
        _ctx.globalAlpha = SCANLINE.lineAlpha;
        _ctx.fillStyle = SCANLINE.lineColor;
        var j;
        for (j = 0; j < elem.height; j += SCANLINE.lineHeight*2) {
            ctx.fillRect(0, j, elem.width, SCANLINE.lineHeight);
        }
        _ctx.globalAlpha = 1;
    }
    if (noise==true){
        _ctx.fillStyle = NOISE.noiseColor;
        var xx,yy;
        for (xx = 0; xx < canvas.width; xx += NOISE.noiseJump) {
            for(yy=0;yy<canvas.height; yy+=NOISE.noiseJump){
                _ctx.globalAlpha = Math.random()*0.3;
                _ctx.fillRect(xx,yy,4,4);
            }
        }
        ctx.globalAlpha = 1;
    }
    if (shine==true) {
        function draw_shine(){
            _ctx.fillStyle=SHINE.shineColor;
            var  oldAlpha=ctx.globalAlpha;
            _ctx.globalAlpha=SHINE.shineAlpha;
            //ctx.globalCompositeOperation = 'darker';
            _ctx.beginPath();
            _ctx.moveTo(room.width, 0);
            _ctx.bezierCurveTo(room.width, SHINE.shineHeight, 0, SHINE.shineHeight, 0, 0);//ctx.arc(,75,50,0,Math.PI);
            _ctx.fill();
            _ctx.globalAlpha=oldAlpha;
        }
        draw_shine();
    }
    room.currentTime++;
}