JSFiddle - React, Tailwind, and code Playground

by mobidevelop

HTML

<button onclick="start();">Start</button>
<button onclick="stop();">Stop</button>

<canvas id="surface" width="480" height="320">
No canvas for you!
</canvas>

JavaScript

(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
    }
 
    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
 
    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());
(function() {
    var Game = function() {
        this.run = false;
        this.init = function {
            
        };
        this.step = function {
            if (run) {
                update();
                render();
            }
        };
        this.update = function {
        };
        this.render = function {            
        };
    }
    window.Game = new Game();
}());

i = 0;
run = false;
canvas = document.getElementById('surface');
context = null;
x = 0;
if (canvas.getContext) {
    context = canvas.getContext("2d");
    context.fillStyle = "rgba(0,0,0,1)";
}
function doStep() {
    if (run) {
        doUpdate();
        doRender();
        requestAnimationFrame(doStep);
    }    
}
function doUpdate() {
    i++;
    x++;
}
function doRender() {
    if (context != null) {
        context.clearRect(0,0,480,320);
        var tw = context.measureText(i);        
        context.fillText(i, x++, 10);
        if (x >= 480) {
            x = 0 - tw.width;
        }
   ...