Develop the base visual algorithm for a web-based ring configurator.

The goal of this project is to build a working setup for a ring configurator. We have 2 ring models rendered in different width 9 from ( 2mm to 8mm ) in 0.5 mm [login to view URL] in 3 materials ( yellow gold , silver and rose gold ). We need an HTML CANVAS JAVASCRIPT solution that will be able to change and combine these parameters so the user can configure a custom ring pairs. The interface don't have to be CSS-ed at all - just minimal controls that give the desired options. Main point is to develop a system that will dynamically change canvas masking so a client is able to select different material / size /shape combinations. Also visible in the canvas part of configurator should be 2 rings - one for men and one for woman. Important is to make the configurator dynamically change the materials ( to be possible to add another textures later on ) and to not only change pre-prepared images ( making a thousand pre-made images is not the point ). Canvas should be 330x310px. Gaps between different materials ( picture 3 ) should be visible. Perfect candidate should have provable experience with Canvas and image masking manipulations ( experience in web configurators is also a big plus )