JSFiddle - React, Tailwind, and code Playground

by jstoudt

HTML

<canvas id=television width=160 height=222>
    Go get yourself a real browser!
</canvas>

<div class="frame-rate">
    <label>Frame Rate</label>
    <input id="fps">
    <span>fps</span>
</div>

CSS

canvas {
    display: block;
    border: 1px solid #333;
    -webkit-border-radius: 10px /15px;
    -moz-border-radius: 10px / 15px;
    border-radius: 10px / 15px;
    margin: 20px auto 0;
    -webkit-transform: scaleX(2.0);
    -moz-transform: scaleX(2.0);
    -o-transform: scaleX(2.0);
    -ms-transform: scaleX(2.0);
    transform: scaleX(2.0);
}

.frame-rate {
    margin-top: 45px;
}

.frame-rate label {
    margin-right: 7px;
}

.frame-rate label:after {
    content: ":";
}

.frame-rate input {
    width: 4em;
}

.frame-rate span {
    font-size: 12px;
}

JavaScript

(function(television) {
    'use strict';
    // normalize requestAnimationFrame event
    var reqAnimFrame = (function() {
        return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            function(f) {
                setTimeout(f, 16);
            };
        })(),
        
        // define a reference to the canvas's 2D context
        context = television.getContext('2d'),
        
        // create a buffer to hold the pixel data
        pixelBuffer = context.createImageData(television.width, television.height),
        
        // define a reference to the text input element for frames per second
        frameRate = document.getElementById('fps'),
        
        // this variable will hold the number of frames rendered
        frameCount = 0,
       
        // this will hold the number of frames rendered at last rate calculation
        lastFrameCount = 0,                    

        // the unix timestamp at the last frame rate calculation
        lastTime = +new Date();
    
    (function drawStatic() {
        var color,
            data = pixelBuffer.data,
            index = 0,
            len = data.length;
    
        while (index < len) {
            // choose a random grayscale color
            color = Math.floor(Math.random() * 0xff);
            
            // red, green and blue are set to the same color
            // to result in a random gray pixel
            data[index++] = data[index++] = data[index++] = color;
            // the fourth multiple is always completely opaque
            data[index++] = 0xff; // alpha
        }
        
        // flush our pixel buffer to the canvas
        context.putImageData(pixelBuffer, 0, 0);
        
        // increment the frame count
        frameCount++;
        
        // do it all again next vsync
        reqAnimFrame(drawStatic);
    
    }());
    
    (function calcFrameRate() {
        var now =...