JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id=television width=200 height=320>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 /20px;
    -moz-border-radius: 10px / 20px;
    border-radius: 10px / 20px;
    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,
            _index = 0,
            _index2 = 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++] = 0xaf; // alpha
        }

        for (index = 0; index < television.width; ++index) {
            color = Math.floor((index+15) / 10) % 2 == 0 ? 0 : 0xff;
            _index = television.width * 4 * (television.height / 2) + index * 4;

            data[_index] = data[_index + 1] = data[_index + 2] = color;
            data[_index + 3] = 0xff; // alpha
            _index += television.width * 4;
...