title: Canvas: fillStyle-function overwriting other items
body: <p>I'd like to do a project working together with Canvas in html5 (Canvas in python didn't work as nice as in html5 :/ ) but I have a problem.</p>
  
  <p>I want to have some rectangles with different colors. Odd Rectangles (e.g. 1, 3, ...) should have a different color than others. But my problem starts without the if-function as well.</p>
  
  <p>Simple example:</p>
  
  <pre><code>[http://jsfiddle.net/a7pwuynb/][1]
  </code></pre>
  
  <hr>
  
  <p>As you can see, the first rectangle should be "blue", the second one should be "yellow". But in the program all rectangles becoming "yellow". Can't explain myself, why it's like this.</p>
  
  <p>Afterwards it should be like this, but here is the problem still working:</p>
  
  <pre><code>[http://jsfiddle.net/r2g9ybpw/][2]
  </code></pre>
  
  <hr>
  
  <p>As well I am lost with the "click"-function (copied the function from another example). Would be glad to get a tipp here as well. I want to make it like this that I make a click on the rectangle and it tells me his number. Afterwards I want to change the color. But that's the future plan. First I have to fix the problem with the colors and the click-function. </p>
  
  <p>Would be glad to get help from your site.</p>
  
  <p>Thank you in advance :)</p>
  
  <p>Greets </p>
  
  <p>Robin </p>
  
  <p>P.S.: This is my first entry here that's why I didn't understand quite well how it should work with the "jsfiddle.net-Link in the future. Hopefully someone of you can explain it to me if I did it right. Tried to follow all the instructions given in the website. </p>