JSFiddle - React, Tailwind, and code Playground

HTML

<div id="canvas">
    <canvas id="bg" width="300" height="300"></canvas>
    <canvas id="fg" width="300" height="300"></canvas>
</div>

CSS

#canvas
{
    position:relative;
    width:300px;
    height:300px;
}

#bg,#fg
{
    position:absolute;
    top:0;
    left:0;
    border:1px solid black;
}

JavaScript

var bg = document.getElementById("bg");
var bctx = bg.getContext("2d");
bctx.fillStyle = "rgb(200,0,0)";  
bctx.fillRect (0, 0,300, 300);

var redraw = function(){
    var fg = document.getElementById("fg");
    fg.width = fg.width;
    var fctx = fg.getContext("2d");
    fctx.fillStyle = "rgb(200,200,200)";  
    fctx.fillRect (Math.floor((Math.random()*300)+1), Math.floor((Math.random()*300)+1) ,20, 20);
    
}
setInterval(redraw,1000);