JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="500" height="300">

</canvas>
<canvas id="canvas2" width="500" height="500">
    
</canvas>

CSS

#canvas {
    border: 2px dotted #000;
    background-color:#b8c3d6;
    color:#66e1f4;
}

#canvas2 {
    margin-top:-300px;
     color:#66e1f4;
}

JavaScript

var canvasWidth;
var canvasHeight;
var interval = 9;
var pos = 0;
var increment = 3;

function init() {
    canvas = document.getElementById("canvas");
     canvas2 = document.getElementById("canvas2");
    ctx = canvas.getContext('2d');
    ctx2 = canvas2.getContext('2d');
    canvasWidth = canvas.width;
    canvasHeight = canvas.height;

    setInterval(function () {
        redraw();
    }, interval);

}

init();

function redraw() {
    ctx.clearRect(500, 0, canvasWidth, canvasHeight);
    ctx.save();

    ctx.translate(canvasWidth / 1.17 - pos*1.42, 0 + pos);
    ctx.fillText("===", 0, 0);

    ctx.restore();
    
    ctx2.clearRect(500, 0, canvasWidth, canvasHeight);
    ctx2.save();

    ctx2.translate(canvasWidth / pos/0.01, 320 - pos);
    ctx2.fillText("===", 0, 0);

    ctx2.restore();

    pos = pos + increment;
    if(pos > canvasHeight)
        increment = -5;
    else if(pos <= 0)
        increment = 2;
        
  pos2 = pos2 + increment2;
    if(pos2 > canvasHeight)
        increment2 = -5;
    else if(pos2 <= 0)
        increment2 = 2;
}