JSFiddle - React, Tailwind, and code Playground

HTML

<div>0</div>
<canvas width="600" height="500" id="cv"></canvas>

JavaScript

var ctx = $('#cv').get(0).getContext('2d');

var $div = $('div');
var i = 0;
setInterval(function() {
    $div.html(i);
    i = 0;
}, 1000);

function drawRegion(x, y) {
    ctx.beginPath();
    
    ctx.moveTo(100 + x, 100 + y);
    ctx.lineTo(200 + x, 150 + y);
    ctx.lineTo(150 + x, 200 + y);
    ctx.lineTo(100 + x, 150 + y);
    ctx.lineTo(100 + x, 100 + y);
    
    ctx.stroke();
}

function draw() {
    i++;
    
    ctx.clearRect(0, 0, 600, 500);
    
    drawRegion(-100, -100);
    drawRegion(0, -100);
    drawRegion(100, -100);
    drawRegion(200, -100);
    
    drawRegion(-100, 0);
    drawRegion(0, 0);
    drawRegion(100, 0);
    drawRegion(200, 0);
    
    drawRegion(-100, 100);
    drawRegion(0, 100);
    drawRegion(100, 100);
    drawRegion(200, 100);
    
    drawRegion(-100, 200);
    drawRegion(0, 200);
    drawRegion(100, 200);
    drawRegion(200, 200);
    
    webkitRequestAnimationFrame(draw);
}

webkitRequestAnimationFrame(draw);