<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>RGB circles</title>
<style>
html,body{
height:100%;
margin:0;
}
#div1{
border-radius: 10px;
position:fixed;
top:0;
right:0;
margin:10px;
padding:10px;
text-align:right;
font-family:monospace;
background-color:rgba(255,255,255,0.5);
}
</style>
</head>
<body>
<canvas id="can1"></canvas>
<div id="div1"></div>
<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var div1=document.getElementById("div1");
var can1=document.getElementById("can1");
var ctx=can1.getContext("2d");
var r=Math.round(Math.random()*255);
var g=Math.round(Math.random()*255);
var b=Math.round(Math.random()*255);
var nr=Math.round(Math.random()*255);
var ng=Math.round(Math.random()*255);
var nb=Math.round(Math.random()*255);
function kulr(){
if(r<nr){r++};if(r>nr){r--};
if(g<ng){g++};if(g>ng){g--};
if(b<nb){b++};if(b>nb){b--};
if(r==nr&&g==ng&&b==nb){nr=Math.round(Math.random()*255);ng=Math.round(Math.random()*255);nb=Math.round(Math.random()*255);};
ww=window.innerWidth;
wh=window.innerHeight;
can1.width=ww;
can1.height=wh;
ctx.fillStyle="rgb("+r+","+g+","+b+")";
ctx.fillRect(0,0,ww,wh);
ctx.strokeStyle="rgb(255,0,0)";
ctx.beginPath();
ctx.arc(ww/2, wh/2,r,0,2*Math.PI);
ctx.stroke();
ctx.strokeStyle="rgb(0,255,0)";
ctx.beginPath();
ctx.arc(ww/2, wh/2,g,0,2*Math.PI);
ctx.stroke();
ctx.strokeStyle="rgb(0,0,255)";
ctx.beginPath();
ctx.arc(ww/2, wh/2,b,0,2*Math.PI);
ctx.stroke();
div1.innerHTML="canvas width: "+ww+" height: "+wh+"<br>current colour red: "+r+" green: "+g+" blue: "+b+"<br>target colour red: "+nr+" green: "+ng+" blue: "+nb;
}
setInterval(kulr,100);
</script>
</body>
</html>
