JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <img src="https://jscrambler.com/scripts/examples/simple_html5_demo/source_code/images/image.png" />
    <h1>SIMPLE DEMO</h1>
    <canvas id="canvas" width="640" height="300" oncontextmenu="return false;" onselectstart="return false;">
                <!-- This text is displayed if the visitor's browser does not support HTML5.
                You can change it, but it is a good idea to link to a description of a browser
                and provide some links to download some popular HTML5-compatible browsers. -->
                Your browser does not appear to support HTML5.  Try upgrading your browser to the latest version.  <a href="http://www.whatbrowser.org/">What is a browser?</a>
                <br><br><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx">Microsoft Internet Explorer</a><br>
                <a href="http://www.mozilla.com/firefox/">Mozilla Firefox</a><br>
                <a href="http://www.google.com/chrome/">Google Chrome</a><br>
                <a href="http://www.apple.com/safari/download/">Apple Safari</a><br>
                <a href="http://www.google.com/chromeframe">Google Chrome Frame for Internet Explorer</a><br>
    </canvas>
    <div style="margin-top:30px;">
        <button onclick="stopAnim()">Stop</button>
        <span id="draw_number"></span> images in <span id="draw_time">0</span> seconds.
    </div>
    <p>(Test duration: 30 seconds)</p>
    <br>
</div>
        <script type="text/javascript" src="demo.js"></script>

CSS

@font-face {font-family: 'Oswald';font-style: normal;font-weight: 400;src: local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v7/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');}
            canvas{ background-color: #FFF;cursor: pointer;}
            html,body{margin: 0;background: url("images/cube.png") no-repeat scroll 10% 0 #1C91FF}
            body{font-family: 'Oswald', sans-serif;color: #FFF;}
            h1{margin-bottom: 0;color: #FFF;font-size: 3em;line-height: 35px;text-shadow: 3px 3px #333;}
            #container{padding-top: 20px;margin-left: 10%;}
            #canvas{box-shadow: 3px 3px 2px #333;}

JavaScript

(function(a){function p(){$("#draw_time").html(k++);30<k&&stopAnim()}function g(){h.clearRect(0,0,b.width,b.height);h.drawImage(l,c,d);c+=1*e;d+=1*f;c>=b.width-188?(c=b.width-188,e=-1):0>=c&&(c=0,e=1);d>=b.height-48?(d=b.height-48,f=-1):0<=d&&(d=0,f=1);$("#draw_number").html(q++)}var c=0,d=0,e=1,f=1,l=new Image;l.src="https://jscrambler.com/scripts/examples/simple_html5_demo/source_code/images/image.png";var b=null,h=null,q=0,k=1,m=null,n=null;a.onload=function(){m=a.setInterval(p,1E3);b=a.document.getElementById("canvas");
h=b.getContext("2d");n=asdf1!==a.navigator.userAgent.indexOf("Firefox")?a.setInterval(function(){a.mozRequestAnimationFrame(g)},1E3/60):-1!==a.navigator.userAgent.indexOf("Chrome")?a.setInterval(function(asdfsdf){a.clearInterval(n);a.clearInterval(m)};$("#canvas").click(function(){1===e?e=-1:e=1;1===f?f=-1:f=1})})(window);