Stackblur

HTML

<script src="http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo_files/loader-min.js"></script>
<script src="http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo_files/combo.js"></script>
<script src="http://www.quasimondo.com/StackBlurForCanvas/StackBlur.js"></script>
<script src="http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo_files/yui-min.js"></script>
<script src="http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo_files/yui.js"></script>
<div id="imageHolder" style="position:absolute;left:20px; top:20px;text-align:center;font-size:10px;">
			 <img id="srcimg" src="http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo_files/lonerider2.jpg"><br>
		</div>
		<div id="canvasHolder" style="position:absolute;left:20px; top:20px;text-align:center;font-size:10px;">
			 <canvas height="375" width="500" style="width: 500px; height: 375px;" id="canvas">
		</canvas></div>

		
		<div id="slider-contentbox"> 
			<div id="slider-valuebox"> 
				<div style="left: -5px; top: -10px;" id="slider-thumb" class="slider yui3-dd-draggable"> </div> 
			</div> 
		</div> 
		<div id="centerlog" style="position:absolute; left: 230px; top:403px;font-size:12px;">Radius: 0</div>
		<div style="position:absolute; left: 450px; top:400px;">

CSS

body { text-align:center; background-color: #ffffff; }   
				   
		   .slider {
				position: relative;
				text-align: center;
				cursor: move;
				padding: 0;
				margin: 0;
				height: 21px;
				width: 21px;
			}
			 
			.slider div { }
			 
			#slider-contentbox {
				position: absolute;
				top: 400px;
				left: 20px;
				height: 1px;
				width: 181px;
				padding: 10px;
				background-color: #CDCDCD;
			}
			#slider-valuebox {
				position: relative;
				height: 1px;
				background-color: #666;
			}
			 
			#slider-thumb { 
				background-color: #202020;
				top:-10px;
				left:-10px;
				color: #000;
			}

JavaScript

var blurRadius = 0;
	   
		YUI({
		//Last Gallery Build of this module
		gallery: 'gallery-2010.02.19-03'
	}).use('dd-constrain', 'node', 'gallery-center', 'gallery-simpleslider', function( Y ) {
			var thumb = Y.one('#slider-thumb'),
				slider = new Y.apm.SimpleSlider({
					node: '#slider-contentbox'
				}).render();
	 
			slider.on('valueChange', function(e) {
				blurRadius = e.newVal[0];
				Y.one('#centerlog').set('innerHTML', "Radius: " + e.newVal[0]);
				stackBlurImage( 'srcimg', 'canvas', blurRadius, false );
			});
		})