JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/pixi.js/1.5.1/pixi.js"></script>
<script src="https://rawgit.com/mrdoob/stats.js/master/src/Stats.js"></script>
<canvas id="view"></canvas>

JavaScript

function init()
{
    var width = 500;
    var height = 500;
    var canvas = document.getElementById("view");
    var stage = new PIXI.Stage(0x000000);
    var renderer = new PIXI.autoDetectRenderer(width, height, canvas, null, true);
    
    var colors = [0x00FFFF, 0xFF0000, 0x00FF00, 0x0000FF];
    var colorIndex = 0;
    
    var graphics = new PIXI.Graphics();
    
    stage.addChild(graphics);
    renderer.render(stage);
    
    var PIXEL_SIZE = 8;
    
    function update() {
      
        for (var y=0; y<height/PIXEL_SIZE; y++) {
            for (var x=0; x<width/PIXEL_SIZE; x++) {
                colorIndex += 1;
                if (colorIndex >= colors.length) colorIndex = 0;
                var data = graphics.graphicsData[x + y*Math.ceil(width/PIXEL_SIZE)];
                data.fillColor = colors[colorIndex];
                graphics.dirty = true;
                graphics.clearDirty = true;
            }
        }
        
        renderer.render(stage);
        stats.end();
        requestAnimationFrame(update);
    }

    function draw() {
        graphics.clear();
        
        for (var y=0; y<height/PIXEL_SIZE; y++) {
            for (var x=0; x<width/PIXEL_SIZE; x++) {
                graphics.beginFill(colors[0]);
                graphics.drawRect(x*PIXEL_SIZE, y*PIXEL_SIZE, PIXEL_SIZE, PIXEL_SIZE);
            }
        }
        
        renderer.render(stage);
        //stats.end();
        //requestAnimationFrame(draw);
     }
    
    draw();
    requestAnimationFrame(update);
}

var stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = "absolute";
stats.domElement.style.left = "0px";
stats.domElement.style.top = "0px";
document.body.appendChild( stats.domElement );

init();