JSFiddle - React, Tailwind, and code Playground

HTML

<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>

<div id="contain">
        <canvas id="surface1" width="480" height="160">
        </canvas>
        <canvas id="surface2" width="480" height="160">
        </canvas>
</div>

<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>

CSS

#contain {
    width: 480px;
    height: 160px;
    margin: 0 auto;
    position: relative;    
}

#surface1,
#surface2 {
    top: 0;
    left: 0;
    position: absolute;
}

JavaScript

{
    var surface1 = document.getElementById('surface1');
    if (surface1 != null) {
        if (surface1.getContext) {
            var context = surface1.getContext("2d");
            if (context != null) {
                context.fillStyle = "rgba(255,0,0,0.25)";
                context.fillRect(0,0,480,160);
            }
        }
    }
    surface2 = document.getElementById('surface2');
    if (surface2 != null) {
        if (surface2.getContext) {
            var context = surface2.getContext("2d");
            if (context != null) {
                var x = 0;
                context.fillStyle = "rgba(0,0,0,1.0)";
                last = new Date();
                setInterval
                (
                    function()
                    {
                        var now = new Date();
                        var del = (now - last) / 1000.0
                        last = now;
                        
                        context.clearRect(0,0, 480, 160);
                        context.fillRect(x, 10,32,32);                
                        x += 10 * del;
                        if (x > 480) {
                            x = -32;
                        }
                    }, 15
                );            
                
            }
        }
    }
}