JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<canvas id="canvas"></canvas>

CSS

#canvas {
    border:1px solid #ddd;
}

JavaScript

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');
    
var game = {
    pieces: ['test', 'hi'],
    
    setup: function() {
        canvas.width = 480;
        canvas.height = 360;
    
        for (x=0; x <= 6; x++) {
            for (y=0; y <= 5; y++) {
                this.pieces[x][y] = 0;
            }
        }
        
        this.loop();
    },
    
    render: function() {
        // Changing size also clears canvas, because hax
        canvas.width = 480;
        canvas.height = 360;
        
        ctx.fillStyle="#F7F011";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        for (x=0; x <= 6; x++) {
            for (y=0; y <= 5; y++) {
                switch(this.pieces[x][y]) {
                    case 1:
                        ctx.fillStyle = "#ED1818";
                        break;
                    case 2:
                        ctx.fillStyle = "#2F3DDE";
                        break;
                    default:
                        ctx.fillStyle = "#fff";
                }
                ctx.beginPath();
                ctx.arc((x + 1) * 68, (y + 1) * 68, 20, 0, 2*Math.PI);
                ctx.fill();
            }
        }
    },

    loop: function() {
        this.render();
        
        window.setTimeout(1000, this.loop());
    }
};

window.onload = game.setup();