title: html5 canvas custom shape from image
body: <p>I am having problems with making a RISK-like game in html. The solution I am using right now is to give each country "position: absolute;" and then position it where it belongs, but problem happens when the user wants to mouse-over or click on the desired country. Country is represented as block and has background image with shape of a country so, when you look at it, you don't see it is actually a block.</p>
  
  <p>Can you give me any examples or a good resource website where I can achieve the following:</p>
  
  <p>this is how it current looks like: <a href="http://s24.postimg.org/402tvyovp/image.png" rel="nofollow">http://s24.postimg.org/402tvyovp/image.png</a></p>
  
  <p>this is how I want it to look and act like: <a href="http://s24.postimg.org/5cpkuysmt/image.png" rel="nofollow">http://s24.postimg.org/5cpkuysmt/image.png</a> </p>
  
  <p>So element has shape of a country, not a block, which means when user puts mouse in that shape (not the block that's surrounding it), script would execute some function.</p>