HTML5 Canvas : Animating Gradients For Cheap Retro FX

I'm currently updating the manuscript for HTML5 Canvas for O'Reilly and I need to add a new example to the text chapter of the book. This week I decided to see if I could replicate an old-style Atari color-cycle in HTML5 using the Canvas API alone: no bitmaps or anything other helpers.  The results are below here: (click to see the exmaple)




(http://www.8bitrocket.com/html5canvas/colorcycle/ColorCycle.html)


(note, if you can't see this try it in Google Chrome.  If you are using the default browser on an Android device, switch to Chrome for Android.) At first I did not know how I was going to achieve this, but the answer came fairly quickly.    I decided to use the Canvas API  createLinearGradient() function.   createLinerGradient() works like this.  You set-up a gradient "line" the represents the direction of the color gradient.  Then you create "color stops" that represent the colors to the gradient.    I'll show this in the code  code later. To get started, I first, I set-up an animation loop:

function drawScreen() {

}

function gameLoop() {
   window.setTimeout(gameLoop, 20);
   drawScreen() 
}

Next, I created a simple array of objects that represented the colors of the gradient and the color stops.  Colors stops are percentage of the gradient. I started with red, then added yellow, blue, green, purple, and red again.  I had to add red twice so that the color flowed back the beginning.  Notice that the percentages for both reds are only 1/2 of the others (.125 as instead of  .25)

var 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});

Next, inside the drawScreen()  function I created the gradient. First, I set-up up a gradient on the current path.  The  arguments to the function represent the "line" that the gradient will follow.  Since I wanted the gradient to be in a straight vertical line, I centered it in the middle of the canvas, and drew it directly down to the bottom.

var gradient = context.createLinearGradient( 
               theCanvas.width/2,
               0,
               theCanvas.width/2, 
               theCanvas.height);

Next, I loop through the colorStops array calling gradient.addColorStop() for each color in the array.    A "gradient color stop"() has two arguments: the color and the percentage.  I already set these up in the array, so now they are just applied in a loop. After each gradient color stop() is added, I increment the percentage of each color by .015.  This effectively moves the color "up" .  If the gradient color stop percentage value goes above 1, I set it back to 0, which moves it back to the bottom of the gradient.

for (var i=0; i < colorStops.length; i++) {     
   var tempColorStop = colorStops[i];     
   var tempColor = tempColorStop.color;     
   var tempStopPercent = tempColorStop.stopPercent;     
   gradient.addColorStop(tempStopPercent,tempColor);    
   tempStopPercent += .015;     
   if (tempStopPercent > 1) {
       tempStopPercent = 0;
   }
   tempColorStop.stopPercent = tempStopPercent;;
   colorStops[i] = tempColorStop;
 }

In reality, the gradient is not being "animated", I'm just changing the location of each color by changing the gradient color Stop percentage.  However, the effect is the same.  It looks like the colors are cycling. Finally, I display the text using the gradient as the color for fillStyle.

  context.fillStyle = gradient;
  context.fillText ( message, xPosition ,yPosition);

That's it.  I'm sure all kinds of other, way more awesome, effects can be created with animated gradients, but this is just a start. You can get the code here.