<html>
<head>
<style>
body {padding:0px;margin:0px;}
</style>
</head>
<body>
<canvas id="demo"></canvas>
<script>
var c=document.getElementById('demo');
var cc=c.getContext("2d");
var xpos=0;
window.addEventListener("load",setDimensions);
window.addEventListener("resize",setDimensions);
reset();
setInterval(redToYellow,20);
function setDimensions() {
c.width=window.innerWidth;
c.height=window.innerHeight;
};
var cFname="";
function draw(n1,n2,n3,fname) {
if (cFname!=fname) {xpos=0};
cFname=fname;
var grd=cc.createRadialGradient(c.width/2,c.height/2,0,c.width/2,c.height/2,(c.width+xpos)*0.5);
grd.addColorStop(0,"#FFF");
grd.addColorStop(0.5,"rgb(" + n1 + "," + n2 + "," + n3 + ")");
grd.addColorStop(1,"#000");
xpos=addordistract1Neon(xpos);
cc.fillStyle=grd;
cc.fillRect(0,0,c.width,c.height);
cc.fillStyle="black"
cc.globalAlpha=0.4;
cc.fillRect(c.width/2-100,c.height/2-50,200,105);
cc.globalAlpha=0.7;
cc.fillStyle="white"
cc.font="30pt Arial";
cc.textAlign="center";
cc.fillText("COLORS",c.width/2,c.height/2);
cc.font="15pt Arial";
cc.fillText(fname + "()",c.width/2,c.height/2+30);
cc.globalAlpha=1;
};
var g,b,e,h,b,f,i;
function reset() {
g=b=e=h=0;
b=f=i=255;
};
function redToYellow() {
if (g<255) {
draw(255,g,0,arguments.callee.name);
g++;
}
else
{
yellowToGreen();
};
};
function yellowToGreen() {
if (b>0) {
draw(b,255,0,arguments.callee.name);
b--;
}
else
{
greenToCyan();
};
};
function greenToCyan() {
if (e<255) {
draw(0,255,e,arguments.callee.name);
e++;
}
else
{
cyanToBlue();
};
};
function cyanToBlue() {
if (f>0) {
draw(0,f,255,arguments.callee.name);
f--;
}
else
{
blueToPurple();
};
};
function blueToPurple() {
if (h<255) {
draw(h,0,255,arguments.callee.name);
h++;
}
else
{
purpleToRed();
};
};
function purpleToRed() {
if (i>0) {
draw(255,0,i,arguments.callee.name);
i--;
}
else
{
reset();
};
};
var negNeon=false;
function addordistract1Neon(n) {
var returnvalue=n;
if (returnvalue>127 || negNeon) {
returnvalue--;
negNeon=true;
if (returnvalue<1) {negNeon=false}
} else {
returnvalue++;
};
return returnvalue;
};
</script>
</body>
</html>