JSFiddle - React, Tailwind, and code Playground

by yesprasoon

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://www.quasimondo.com/StackBlurForCanvas/StackBlur.js"></script>
<div id="canvasHolder">
        <canvas id="canvas"></canvas>
</div>

JavaScript

var strDataURI;
//
displayBackground(true);
//
window.onresize = function(event) {
displayBackground(false);
}
//
function displayBackground(bChangeImage)
{
   // alert("displayBackground");
                    var appWidth = window.innerWidth;
                    var appHeight = window.innerHeight-4;
                    //
    if (bChangeImage)
    {
                    var suffix_array = ["_california","_easter","_eiffel","_hk","_taj"];
                    var ran = Math.floor((Math.random()*5)+1);
                    ran = ran - 1;
    //ran = 3;
                    strDataURI = "http://minds-eye.info/TP_Test/TP"+suffix_array[ran]+".jpg";
    }
                    //
                    var myCanvas = document.getElementById('canvas');
                    var ctx = myCanvas.getContext('2d');
                    var img = new Image;
                    img.onload = function(){
                                        ctx.canvas.width  = appWidth;
                                        ctx.canvas.height = appHeight;
                                        //
                                        var hFraction = appHeight / img.naturalHeight;
                                        var displayWidth = img.naturalWidth*hFraction;
                                        mrgLeft = (appWidth - displayWidth)/2;
                                        mrgTop = (appHeight - img.naturalHeight)/2;
                                        ctx.drawImage(img,mrgLeft,0, displayWidth, appHeight);
                                        //blurMargin = 20;
                                        //stackBlurCanvasRGB( "canvas", blurMargin, blurMargin, appWidth-blurMargin*2, appHeight-blurMargin*2, 6 );
                    };
                    img.src = strDataURI;
}