Drawing vectors on the canvas element : how to generate the vector strings

Question

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]

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.

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?

and is this the best way to do it?

this file (http://raphaeljs.com/world/world.js) contains vector strings for world-map. i'm not sure how they generated it. that's where i'm interested.

is there a way to generate vector strings from a picture?

Answer 1

Use a svg editor (for example this online svg editor). Then import your picture and retrace the elements of your picture using paths.