JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var rectY=200, rectW=40;
var rectX = -rectW;
var canvas = null;
var context = null;

function Square(x, y, w, color) 
{
    this.x = x;
    this.y = y;
    this.w = w;
    this.color = color;
    
    this.anim = function() 
    {
        if (this.x < context.canvas.width) {
            this.x += 5;
            context.fillStyle = this.color;
            context.strokeStyle = "red";
            context.lineWidth = 3;
            context.fillRect(this.x,this.y,this.w,this.w);
            context.strokeRect(this.x,this.y,this.w,this.w);
        }
        else this.x=-this.w;
    }
}

function init() {
    canvas = document.getElementById('testCanvas');
    context = canvas.getContext("2d");
    
    
    var rect1 = new Square(-40, 200, 40, "yellow");
    var rect2 = new Square(0, 100, 40, "blue");
    var objects = [rect1, rect2];
    
    setInterval(function(){
        blank();
        for(rect in objects){
            objects[rect].anim();
        }
    }, 30);
}

function blank() {
    context.fillStyle = "#00ddee";
    context.fillRect(0,0,context.canvas.width, context.canvas.height);
}


init()