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 (window) {
    /* Local variables */
    var x = 0;
    var y = 0;
    var xDirection = 1;
    var yDirection = 1;
    var image = new Image();
    image.src = "http://ww2.sjkoreancatholic.org/files/testing_image.jpg";
    var canvas = null;
    var context2D = null;
    var count = 0;
    var time = 1;
    var run_timer = null;
    var run_animation = null;

    /* Initiate animation onload */
    window.onload = init;

    /* Function to initiate animation */
    function init() {
        var FPS = 60;
        run_timer = window.setInterval(timer, 1000);
        canvas = window.document.getElementById('canvas');
        context2D = canvas.getContext('2d');
        if (window.navigator.userAgent.indexOf('Firefox') !== -1) {
            run_animation = window.setInterval(function () {
                window.mozRequestAnimationFrame(draw);
            }, 1000 / FPS);
        } else if (window.navigator.userAgent.indexOf('Chrome') !== -1) {
            run_animation = window.setInterval(function () {
                window.webkitRequestAnimationFrame(draw);
            }, 1000 / FPS);
        } else {
            run_animation = window.setInterval(draw, 1000 / FPS);
        };
    }

    /* Function to update the count of seconds in the page */
    function timer() {
        $("#draw_time").html(time++);
        if (time > 30) stopAnim();
    }

    /* Function to draw image */
    function draw() {
        context2D.clearRect(0, 0, canvas.width, canvas.height);
        context2D.drawImage(image, x, y);
        x += 1 * xDirection;
        y += 1 * yDirection;

        if (x >= canvas.width - 188) {
            x = canvas.width - 188;
            xDirection = -1;
        } else if (x <= 0) {
            x = 0;
            xDirection = 1;
        }
        if (y >= canvas.height - 48) {
            y = canvas.height - 48;
            yDirection = -1;
        } else if (y <= 0) {
            y = 0;
            yDirection = 1;
        }

       ...