title: Changing colors of shapes in HTML5 canvas
body: <p>I'm working on displaying interactive map in html5.</p>
  
  <p>I have created zones of map as array of numbers (representing coordinates)
  like:</p>
  
  <pre><code>Zone1=[{x=3,y=4}, {x=8,y=5}]
  </code></pre>
  
  <p>and I have also created a map which is an array of zones
  like:</p>
  
  <pre><code>map=[zone1, zone2....]
  </code></pre>
  
  <p>I have no problem drawing the zones in the canvas using <code>context.lineTo()</code> function, the same way I'm able to capture the mouse position on click and determine on which zone a user has clicked using point in polygon algorithm. </p>
  
  <p>My difficulty arises when I want to fill  color of of the zone when it is clicked at.</p>
  
  <p>Anybody have ideas?</p>
  
  <p>PS:</p>
  
  <ul>
  <li>The shapes I made are irregular</li>
  <li>I'm not in to using JavaScript libraries like jQuery or anything else</li>
  </ul>