JSFiddle - React, Tailwind, and code Playground

by opherv

HTML

<div id="loading">
  <p id="loadText">Loading...</p>
  <div id="barCont"></div>
  <div id="bar"></div>
</div>

<div id="layers">
	<canvas id="layerA" ></canvas>
	<canvas id="layerB" ></canvas>
	<canvas id="layerC" ></canvas>
	<canvas id="layerD" ></canvas>
</div>

<div id="fps_count">71 32 58 FPS</div>
<div id="pos">pos</div>
<div id="status">status</div>
<div id="status1">status1</div>

CSS

body   {background-color:black; padding:0; margin:0; } 
#layers {position:absolute; width:1000px; height:500px; padding:0; margin-left: -500px; left: 50%; z-index:1; top:10px; background-color:blue; }/*contain all layers*/
#layers canvas{width: 200px;} #layerA {position:absolute; width:1000px; height:500px; top: 0px; left: 0px; padding:0; margin:0; z-index:4; background-color:green; border:1px gre solid; left:0; top:0;}/*background screen show*/
#layerB {position:absolute; width:1000px; height:500px; top: 0px; left: 0px;  padding:0; margin:0; z-index:2; background-color:red; border:1px red solid; visibility:hidden; }/*Variable animation hidden*/
#layerC {position:absolute; width:1000px; height:500px; top: 0px; left: 0px;  padding:0; margin:0; z-index:3; background-color:brown; border:1px brown solid; display:none; }/*Variable animation hidden*/
#layerD {position:absolute; width:1000px; height:500px; top: 0px; left: 0px;  padding:0; margin:0; z-index:5; background-color:azure;   border:1px azure solid; }/*create ball*/

#pos{top:50px; left:10px; color:white; font-size:16px;}
#status{position;absolute; top:10px; left:10px; color:white; font-size:16px;}
#status1{position;absolute; top:20px; left:10px; color:white; font-size:16px;}
#fps_count {position: absolute; top: 10px; right: 0px; width:150px; font-size: 20px;
		    color: white; font-family: 'Happy Sans', cursive; border:1px red solid;}
/* Loading */
#loading {position:relative; width:1000px; height:500px; padding:0; margin-left:auto; margin-right:auto; top:10px; background:yellow; z-index:1;}
#loading #barCont {width: 400px; height: 20px; position: absolute;
				   top: 50%; left: 50%; margin: -10px 0 0 -200px; background: black;}
#loading #bar {width: 0; height: 20px; position: absolute; left: 0; background: #F3FF67;}

JavaScript

var WW = 1400,WH = 700,WTH = 1000,HTH = 500;

var layerA        = document.getElementById('layerA'),//layer background
	CanvasA       = layerA.getContext('2d');
	layerA.width  = 300;//width size of image background
	layerA.height = 150;//height size of image background
	
var layerB        = document.getElementById('layerB'),//senvich animation hidden
	CanvasB       = layerB.getContext('2d');
	layerB.width  = WW;
	layerB.height = WH;	
	
var layerC        = document.getElementById('layerC'),//DEFINE layerBVariable it use as a variable
	CanvasC       = layerC.getContext('2d');
	layerC.width  = WW;
	layerC.height = WH;
	
var layerD        = document.getElementById("layerD"),//createball
	CanvasD       = layerD.getContext('2d');	
	layerD.width  = WW;
	layerD.height = WH;
	
	CanvasA.clearRect(0,0,300,150);
	CanvasA.fillStyle= 'green';
	CanvasA.fillRect(0,0,300,150);
	
	CanvasB.clearRect(0,0,WW,WH);
	CanvasB.fillStyle= 'red';
	CanvasB.fillRect(0,0,WW,WH);
	
	CanvasC.clearRect(0,0,WW,WH);
	CanvasC.fillStyle= 'brown';
	CanvasC.fillRect(0,0,WW,WH);

	CanvasD.clearRect(0,0,WW,WH);
	CanvasD.fillStyle= 'azure';
	CanvasD.fillRect(0,0,WW,WH);