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?
Use a svg editor (for example this online svg editor). Then import your picture and retrace the elements of your picture using paths.