<!doctype html>
<html lang="fr">
<head
<meta charset="utf-8">
<title>Page</title>
<style>
html,body{
height:100%;
margin:0;
}
body{
background-color:royalblue;
overflow:hidden;
}
#div1{
position:fixed;
top:0;
right:0;
padding:10px;
background-color:rgba(0,0,0,0.5);
color:#fff;
font-family:sans-serif;
}
</style>
</head>
<body>
<canvas id="can1"></canvas>
<div id="div1"></div>
<script>
function bro(){
var ww=window.innerWidth;
var wh=window.innerHeight;
var div1=document.getElementById("div1");
var can1=document.getElementById("can1");
var ctx=can1.getContext("2d");
var nx=ww/25;
var ny=wh/25;
var x=0;
var y=0;
var rw=ww/nx;
var rh=wh/ny;
var i,j,r,g,b;
can1.width=ww;
can1.height=wh;
div1.innerHTML=ww+"x"+wh+"="+ww*wh+"px";
for(j=0;j<ny;j++){
for(i=0;i<nx;i++){
r=Math.round(Math.random()*255);
g=Math.round(Math.random()*225);
b=Math.round(Math.random()*255);
ctx.fillStyle="rgb("+r+","+g+","+b+")";
ctx.fillRect(x,y,rw,rh);
x=x+ww/nx;
}
x=0;
y=y+wh/ny;
}}
setInterval(bro,500);
</script>
</body>
</html>
