mattkenefick/gist:4736718

## gistfile1.phtml
<!DOCTYPE html>
<html>
    <head>
        <style>
html, body {
  margin     : 0;
  padding    : 0;
  height     : 100%;
  width      : 100%;
  background : #000;
  overflow   : hidden;
}
canvas {
    position: absolute;
}
        </style>
    </head>
    <body>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://www.quasimondo.com/BoxBlurForCanvas/StackBoxBlur.js"></script>

        <script>
var images = [
  'http://localhost/images/blur.jpg',
  'http://localhost/images/matt.jpg'
];

function canvasImage(image) {

    var image_url = image;

    var canvas = document.createElement('canvas');
        canvas.id = 'canvas' + Math.random();
    var context = canvas.getContext('2d');

    function setCanvasSize() {
      canvas.width = $(window).width();
      canvas.height = $(window).height();
    }

    function loadImage(src, callback) {
        var img = document.createElement('img');
            img.onload = function() {
                callback(img);
            };
            img.src = src;
    }

    this.getCanvas = function() {
        return canvas;
    };

    this.addToStage = function() {
        setCanvasSize();
        document.body.appendChild(canvas);
    }

    this.init = function() {
        loadImage(image_url, function(image) {
            var width = $(window).width();
            var height = $(window).height();

            context.drawImage(image, 0, 0, image.width * 3, image.height * 3);
            stackBoxBlurCanvasRGB(canvas.id, 0, 0, width, height, 10, 1);

            context.shadowColor   = "rgba( 0, 0, 0, 0.3 )";
            context.shadowOffsetX = 0;
            context.shadowOffsetY = 0;
            context.shadowBlur    = 22;
            context.drawImage(image, width / 2 - image.width / 2, height / 2 - image.height /2);
        });
    };

    return this;
};

$(document).ready(function() {
    var img1 = new canvasImage(images[0]);
    var img2 = new canvasImage(images[1]);
        img1.init();
        img1.addToStage();

        img2.init();
        img2.addToStage();
        $(img2.getCanvas()).hide();

        setTimeout(function() {
            $(img2.getCanvas()).fadeIn(1000);
        }, 3500);

        setTimeout(function() {
            $(img2.getCanvas()).fadeOut(1000);
        }, 7000);
});

        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	html, body {
	margin : 0;
	padding : 0;
	height : 100%;
	width : 100%;
	background : #000;
	overflow : hidden;
	}
	canvas {
	position: absolute;
	}
	</style>
	</head>
	<body>
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://www.quasimondo.com/BoxBlurForCanvas/StackBoxBlur.js"></script>

	<script>
	var images = [
	'http://localhost/images/blur.jpg',
	'http://localhost/images/matt.jpg'
	];

	function canvasImage(image) {

	var image_url = image;

	var canvas = document.createElement('canvas');
	canvas.id = 'canvas' + Math.random();
	var context = canvas.getContext('2d');

	function setCanvasSize() {
	canvas.width = $(window).width();
	canvas.height = $(window).height();
	}

	function loadImage(src, callback) {
	var img = document.createElement('img');
	img.onload = function() {
	callback(img);
	};
	img.src = src;
	}

	this.getCanvas = function() {
	return canvas;
	};

	this.addToStage = function() {
	setCanvasSize();
	document.body.appendChild(canvas);
	}

	this.init = function() {
	loadImage(image_url, function(image) {
	var width = $(window).width();
	var height = $(window).height();

	context.drawImage(image, 0, 0, image.width * 3, image.height * 3);
	stackBoxBlurCanvasRGB(canvas.id, 0, 0, width, height, 10, 1);

	context.shadowColor = "rgba( 0, 0, 0, 0.3 )";
	context.shadowOffsetX = 0;
	context.shadowOffsetY = 0;
	context.shadowBlur = 22;
	context.drawImage(image, width / 2 - image.width / 2, height / 2 - image.height /2);
	});
	};

	return this;
	};

	$(document).ready(function() {
	var img1 = new canvasImage(images[0]);
	var img2 = new canvasImage(images[1]);
	img1.init();
	img1.addToStage();

	img2.init();
	img2.addToStage();
	$(img2.getCanvas()).hide();

	setTimeout(function() {
	$(img2.getCanvas()).fadeIn(1000);
	}, 3500);

	setTimeout(function() {
	$(img2.getCanvas()).fadeOut(1000);
	}, 7000);
	});

	</script>
	</body>
	</html>