<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{padding: 0;margin: 0;}
.myCanvas{
background: #ECF3F8;
display: block;
margin: auto;
}
</style>
</head>
<body>
<canvas class="myCanvas" height="500px" width="500px"></canvas>
</body>
<script>
window.onload = function(){
var c = document.getElementsByClassName('myCanvas')[0];
var ctx = c.getContext('2d');
ctx.fillStyle = ('rgba(36,196,191,0.8)');
function myX() {
window.requestAnimationFrame(myX);
var x = 0, y = 0,h = 0;
x = Math.floor(Math.random() * 500);
h = Math.floor(Math.random()*30+10);
function myY() {
ctx.beginPath();
y += 8;
ctx.fillRect(x, y, 2, h);
window.requestAnimationFrame(myY);
}
myY();
ctx.clearRect(0, 0, 500, 500);
}
myX();
}
</script>
</html>
