title: Drawing vectors on the canvas element : how to generate the vector strings
body: <p>For a project i'm currently doing i need to implement an interactive canvas element.
  There will be a shape on canvas  which is divided in to number of sub-areas.
  User should be able to select sub-areas from it and apply different colors to selected area.[these areas are not squares or circles, but custom paths]</p>
  
  <p>this contains some thing similar what i want to achieve. It uses kinetic.js. It shows how to draw the world map using Kinetic.path() method - with vector strings for each country.</p>
  
  <p>Please put me on the line to achieve something similar for foot shape/ or any other shape. How should i obtain this vector string to draw the wanted shape? </p>
  
  <p>and is this the best way to do it?</p>
  
  <p>this file (<a href="http://raphaeljs.com/world/world.js" rel="nofollow">http://raphaeljs.com/world/world.js</a>) contains vector strings for world-map. i'm not sure how they generated it. that's where i'm interested.</p>
  
  <p>is there a way to generate vector strings from a picture?</p>