title: HTML5 canvas painting rectangle on mouse click
body: <p>I have a canvas which loads in a selected image. The canvas should display 2 6x6 rectangles where the user clicks. On the first click, the rectangle should be red, the second click it should be blue on the third click, it resets (deletes both first rectangles) and so on..
  This works fine (see example here: <a href="http://jsfiddle.net/8HSGG/" rel="nofollow noreferrer">http://jsfiddle.net/8HSGG/</a>) <code></code></p>
  
  <p>My problem is when I reload an image, the rectangles start messing up (i.e. colors come in different order or don't show up at all).</p>
  
  <p>I have two variables in the Javascript: topLeft and bottomRight which are both null whenever an image is loaded in, then a check based on those and paint accordingly.</p>
  
  <p>Any idea what's going on? </p>