title: Randomize RGB in HTML5 Canvas with a new value for each fillRect using Javascript
body: <p>My current code for randomizing rgb, has been put in a variable cr (color random)</p>
  
  <pre><code>var cr = 'rgb('+
        Math.floor(Math.random()*256)+','+
        Math.floor(Math.random()*256)+','+
        Math.floor(Math.random()*256)+')';
  </code></pre>
  
  <p>I proceeded to put the variable in the fillstyle canvas element to place color:</p>
  
  <pre><code>ctx.fillStyle = cr;
  </code></pre>
  
  <p>The proceeding fillRect is randomized as expected. Current code: </p>
  
  <pre><code>var c = document.getElementById('canvas');
  var ctx = c.getContext('2d');
  
  var cr = 'rgb('+
        Math.floor(Math.random()*256)+','+
        Math.floor(Math.random()*256)+','+
        Math.floor(Math.random()*256)+')';
  
    ctx.fillStyle = cr;
    ctx.fillRect(0, 210 , 100 ,290);
  </code></pre>
  
  <p>The problem arises when I try to put it in a new fillRect(). For instance:</p>
  
  <pre><code>var c = document.getElementById('canvas');
  var ctx = c.getContext('2d');
  
  var cr = 'rgb('+
        Math.floor(Math.random()*256)+','+
        Math.floor(Math.random()*256)+','+
        Math.floor(Math.random()*256)+')';
  
    ctx.fillStyle = cr;
    ctx.fillRect(0, 210 , 100 ,290);
  
    ctx.fillStyle = cr;
    ctx.fillRect(100, 210, 100, 290);
  </code></pre>
  
  <p>The new ctx.fillStyle uses the same random color. I would like the new fillRect to have a new random color (doing a cool skyline effect so perhaps another 20 or more of these). Perhaps, I need to put a loop into an array, randomize it, and use for every new fillRect. Any solutions would be greatly appreciated :) </p>