title: Creating a Rainbow Effect in Rectangle Canvas
body: <p>I would like to know how to create a rainbow effect in my canvas in the fill style, like for it to change colors at certain intervals or when I continually press a key. Like from red to blue, etc, similar to how you can add a rainbow effect to text.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script type="text/javascript"&gt;
  var GAME_SPEED = 1000/60; //game rate
  var x = 100;
  var y = 100;
  var sideLength = 10;
  
  var leftKey = false;
  var rightKey = false;
  var upKey = false;
  var downKey = false;
  var spaceKey = false;
  
  window.onload = function()
   {
    c = document.getElementById("marCanvas2");
    c.width = window.innerWidth*0.9;
    c.height = window.innerHeight*0.9;
    window.setInterval("draw()" , GAME_SPEED);
   }
  
  document.onkeyup = function(event)
  {
   switch(event.keyCode)
   {
    case 37: leftKey =false;
    break;
    case 39: rightKey = false;
    break;
    case 38: upKey = false;
    break;
    case 40: downKey = false;
    break;
    case 32: spaceKey = false;
    break;
   }
  }
  
  document.onkeydown = function(event)
  {
   switch(event.keyCode)
   {
    case 37: leftKey =true;
    break;
    case 39: rightKey = true;
    break;
    case 38: upKey = true;
    break;
    case 40: downKey = true;
    break;
    case 32: spaceKey = true;
    break;
   }
  }
  
  
  function draw()
  {
   if(leftKey == true)
  {
   x--;
  }
  
  if(rightKey == true)
  {
   x++;
  }
  
  if(upKey == true)
  {
   y--;
  }
  
  if(downKey == true)
  {
   y++;
  }
  
  if(spaceKey == true)
  {
   sideLength++;
  }
   var c = document.getElementById("marCanvas2");
   var cntxt = c.getContext("2d");
   cntxt.fillStyle= " ";
   cntxt.fillRect(x, y, sideLength, sideLength);
  }
  &lt;/script&gt;
  &lt;/head&gt;
   &lt;body&gt;
   &lt;!--Marlon Jacques --&gt;
  &lt;canvas id="marCanvas2" style="border: 5px solid
  #000000;"&gt;
  Your browser does not support the canvas element.
  &lt;/canvas&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>