JSFiddle - React, Tailwind, and code Playground

by tonyleeper

CSS

canvas {
    border: 1px solid black;
}

JavaScript

/**
    Canvas playground
*/
// requestAnimationFrame polyfill by Erik Möller
// fixes from Paul Irish and Tino Zijdel

(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);
    };
}());

var utils = {
    getTimeToImpact: function (y, vy, ay) {
        var discriminant = (vy * vy) - (2 * y * ay);
        if (discriminant < 0) {
            return -1;
        }
        
        var root = Math.sqrt(discriminant);
        var t0 = (-vy + root) / ay;
        var t1 = (-vy - root) / ay;
        
        if (t0 < 0) {
            t0 = t1;
        }
        
        if (t1 < 0) {
            t1 = t0;
        }
        
        return Math.min(t0, t1);
    }
};

var World = function (document) {
    this.initialize();
    window.requestAnimationFrame(this.loop.bind(this));
};

World.prototype.initialize = function () {
    this.canvas = document.createElement('canvas');
    this.canvas.width = 640;
    this.canvas.height = 480;
    document.getElementsByTagName('body')[0].appendChild(this.canvas);    
    
    this.context = this.canvas.getContext('2d');
    
    this.field = {
        x: 0,
        y: 6000
    };
    
   ...