JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="2048px" height="1536px"></canvas>
<div id="fps"></div>

CSS

#canvas{
    width : 1024px;
    height: 768px;
    -webkit-transform: translate3d(0,0,0);
}
#fps {
    position : absolute;
    top : 0;
    left : 0;
}

JavaScript

var Rectangle = function(obj){
			this.x      = obj.from[0];
			this.y      = obj.from[1];
			this.width  = obj.size[0];
			this.height = obj.size[1];
		};

		var layer           = document.getElementById('canvas'),

			delay           = 100,
			countFrame      = 7,
			duration        = delay * countFrame,
			widthFrame      = 100,
			loop            = true,
            
            time            = Date.now || function() { return +new Date(); },
            
            //fps
            fps             = 0;    
            oldtime         = time(),
            show_fps        = true,
                
			start           = time(),
			lastFrame       = start,
			percent         = 0,
			ctx             = layer.getContext('2d'),
			root            = document.body,

			shapes = [
				new Rectangle({from:[500,500],size:[100,100]}),
				new Rectangle({from:[400,500],size:[100,100]}),
				new Rectangle({from:[300,500],size:[100,100]}),
				new Rectangle({from:[200,500],size:[100,100]}),
				new Rectangle({from:[350,550],size:[100,100]}),
				new Rectangle({from:[450,550],size:[100,100]}),
				new Rectangle({from:[150,550],size:[100,100]}),
				new Rectangle({from:[50, 550],size:[100,100]}),
				new Rectangle({from:[500,500],size:[100,100]}),

				new Rectangle({from:[450,500],size:[100,100]}),
				new Rectangle({from:[370,500],size:[100,100]}),
				new Rectangle({from:[490,500],size:[100,100]}),
				new Rectangle({from:[590,550],size:[100,100]}),
				new Rectangle({from:[890,550],size:[100,100]}),
				new Rectangle({from:[630,550],size:[100,100]}),
				new Rectangle({from:[650, 550],size:[100,100]}),

				new Rectangle({from:[450,200],size:[100,100]}),
				new Rectangle({from:[370,300],size:[100,100]}),
				new Rectangle({from:[490,200],size:[100,100]}),
				new Rectangle({from:[590,250],size:[100,100]}),
				new Rectangle({from:[890,250],size:[100,100]}),
				new Rectangle({from:[630,250],size:[100,100]}),
				new Rectangle({from:[650,250],size:[100,100]}),

				new...