title: Colors that change overtime in a canvas (js) / Trouble with setInterval
body: <p>I am trying to make an animation in a canvas where there's just a solid rectangle that shifts from white to red to green to blue and then white again. I think the colors work fine but it happens way too fast to even see anything, so I searched for a wait or delay option and came across the setInterval method. I tried everything I could to make it work but with no luck:  </p>
  
  <p>Here's the somewhat clean code I made.  </p>
  
  <p>The HTML :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
    &lt;style type="text/css"&gt;
        canvas { border: 3px solid black; }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div&gt;
      &lt;button onclick="draw()"&gt;Start the gradient&lt;/button&gt;&lt;br&gt;&lt;br&gt;
      &lt;canvas id="can" width="200" heigth="200"&gt;&lt;/canvas&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The Javascript :</p>
  
  <pre><code>function draw() {
    var can = document.getElementById('can');
    if (can.getContext) {
      var ctx = can.getContext('2d');
      var r = 0;
      var g = 0;
      var b = 0;
      var i;
      for(i=0;i&lt;255;i++){
            ctx.fillStyle = 'rgb('+r+', '+g+', '+b+')';
            ctx.fillRect(0, 0, 200, 200);
            r = r + 1;
      }
      for(i=0;i&lt;255;i++){
            ctx.fillStyle = 'rgb('+r+', '+g+', '+b+')';
            ctx.fillRect(0, 0, 200, 200);
            r = r - 1;
            g = g + 1;
      }
      for(i=0;i&lt;255;i++){
            ctx.fillStyle = 'rgb('+r+', '+g+', '+b+')';
            ctx.fillRect(0, 0, 200, 200);
            g = g - 1;
            b = b + 1;
      }
      for(i=0;i&lt;255;i++){
            ctx.fillStyle = 'rgb('+r+', '+g+', '+b+')';
            ctx.fillRect(0, 0, 200, 200);
            r = r + 1;
            g = g + 1;
      }
    }
  //'can' is the canvas//
  //Red-&gt;Green-&gt;Blue//
  }
  </code></pre>