HTML5 Game - Animate on gradient

Description

Animate on gradient
Demo

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">

window.addEventListener("load", eventWindowLoaded, false);  

function eventWindowLoaded() {//from   w ww  .j a  va 2 s. co m

  canvasApp();
}

function canvasApp() {
  let message = "HTML5 Canvas";
  
  let theCanvas = document.getElementById("canvasOne");
  let context = theCanvas.getContext("2d"); 
  function drawScreen() {
    context.fillStyle = "#000000";
    context.fillRect(0, 0, theCanvas.width, theCanvas.height);
    
    context.font =  "90px impact" 
    context.textAlign = "center";
    context.textBaseline = "middle";
    
    let metrics = context.measureText(message);
    let textWidth = metrics.width;
    let xPosition = (theCanvas.width/2);
    let yPosition = (theCanvas.height/2);
    
    let gradient = context.createLinearGradient( theCanvas.width/2,0,theCanvas.width/2, theCanvas.height);
    for (let i=0; i < colorStops.length; i++) {
      let tempColorStop = colorStops[i];
      let tempColor = tempColorStop.color;
      let tempStopPercent = tempColorStop.stopPercent;
      gradient.addColorStop(tempStopPercent,tempColor);
      tempStopPercent += .015;
      if (tempStopPercent > 1) {
        tempStopPercent = 0;
      }
      tempColorStop.stopPercent = tempStopPercent;;
      colorStops[i] = tempColorStop;
    }
    
    
    context.fillStyle    = gradient;
    context.fillText  ( message,  xPosition ,yPosition);  
  
  
  }
  
  function gameLoop() {
    window.setTimeout(gameLoop, 20);
    drawScreen()  
  }
  let colorStops = new Array(
  {color:"#FF0000", stopPercent:0},
  {color:"#FFFF00", stopPercent:.125},
  {color:"#00FF00", stopPercent:.375},
  {color:"#0000FF", stopPercent:.625},
  {color:"#FF00FF", stopPercent:.875},
  {color:"#FF0000", stopPercent:1});
  gameLoop();

  
}

</script> 
</head>
<body>
<canvas id="canvasOne" width="600" height="200">
 Your browser does not support HTML 5 Canvas. 
</canvas>

  
</div>
</body>
</html>