JSFiddle - React, Tailwind, and code Playground

by yesprasoon

HTML

<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://www.quasimondo.com/StackBlurForCanvas/StackBlur.js"></script>
<div data-role="page">
    <div id="imageHolder" style="position:absolute;left:20px; top:20px;text-align:center;font-size:10px;">
	    <img id="srcimg" src="http://www.london-se1.co.uk/news/images/050408_colombo2.jpg">    
    </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="blurit" data-role="button">Blur it</div>
</div>

JavaScript

$( "#blurit" ).on( "click", blurit_click);
//
function blurit_click()
{
    alert("blur start");
stackBlurImage( 'srcimg', 'canvas', 10, false );
    alert("blur end");
}