JSFiddle - React, Tailwind, and code Playground

by salt

HTML

<!--[if IE]><script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script><![endif]-->
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<canvas id="myCanvas"></canvas>

JavaScript

function setupBackground() {
     canvas = document.getElementById('myCanvas');
    if (typeof window.G_vmlCanvasManager!="undefined") { 
        canvas=window.G_vmlCanvasManager.initElement(canvas);
        var ctx = canvas.getContext('2d');
    }else{
        var ctx = canvas.getContext('2d');
    };
    function draw() {
        canvas.width = 0;
        canvas.height = 0;
        var divWidth = window.innerWidth;//div.scrollWidth;
        var divHeight = window.innerHeight//div.scrollHeight;
        
        var yScale = divHeight / img.height;
        var xScale = divWidth / img.width;

        var newImgHeight = img.height * xScale;
        var newImgWidth = divWidth;

        if (divHeight >= newImgHeight) {
            newImgHeight = divHeight;
            newImgWidth = img.width * yScale;
        };

        canvas.width = divWidth;
        canvas.height = divHeight;
        
        var diffX =(Math.max(newImgWidth,divWidth)-Math.min(newImgWidth,divWidth))/2;
        var diffY =(Math.max(newImgHeight,divHeight)-Math.min(newImgHeight,divHeight))/2;
        var imgX=0-diffX;
        var imgY=0-diffY;
        ctx.drawImage(img,imgX,imgY,newImgWidth,newImgHeight);
    };

    var img = new Image();
    img.onload = function() {
        $(window).bind('resize', function() {
              draw();
          });
        draw();
        //$("#myCanvaspp").animate({"height":"20px"},5000,"")
    };
    img.src ='http://userserve-ak.last.fm/serve/_/460496/Popperklopper.jpg';
};
setupBackground();