Web Canvas with Opacity-control on Shapes

The purpose of this project is to enable the user to drag and drop objects on a web page canvas. Assume that this is a library and some other mechanism will populate a JSON array with the relevant objects present. Create a web page with a canvas to enable shapes to be moved around. The most important feature is to enable TRANSLUCENT/OPACITY on the shapes so that they can overlap each other and blend color. Text must be visible through the opacity. The desired shapes are:- 1. Hexagons 3. Rings (circle with no center) 4. Squares 5. A reverse "c" shape Initial Features:- 1. Translucent/Opacity - as described above 2. Overlay text on shapes (use font San Francisco) 3. Mouseover will cause the object to come to the front if it as at the back. Features Later 1. Snap to grid (can turn on/off) 2. Control the shape color (within the code, not a user control) You can use an external Javascript library if it is free. Ideally the shapes will be CSS, but if images are neccesary, they can be transparent PNG. Below I list some images showing the types of shapes [login to view URL] [login to view URL] This is the Reverse "C" shape in green [login to view URL] This is the desired hexagon style - [login to view URL] Thick border with text inside the hexagon. Below I show examples of the translucent/opacity [login to view URL] [login to view URL] [login to view URL] Below is an example of the snap-to-grid canvas for hexagons [login to view URL] An example of how hexagons could be stacked. [login to view URL] I also found this library to help the hexagon creation [login to view URL] The second generation of the project will be to make advanced shapes - any kind of curved polygon. GENERAL NOTE Please don't be confused by my image examples. Two distinct goals are here. First is to move shapes on a canvas with snap to grid. Second is to move shapes on a canvas so they overlap with transparency. TO BE AWARDED I receive too many automated bids. I won't reply to these. You must explain to me how you will achieve each of:- 1. Translucency/Opacity 2. Mouseover to make the bottom shape to come to the front, and return on MouseOut 3. Overlay text on shapes 4. How color will be managed when two opacity images overlap 5. How text will never overlap This is a complex project. Please only apply if you are truly competent. I will expect complete code refactoring, no bugs, no delivery without you testing. I am brutal but generous - I won't pay for incomplete work or untested work. Please only bid on this project if you can work with the professional standards neccesary. MILESTONES 1. Demonstration of translucent/opacity on any kind of JS-generated shapes, 6-10 shapes, stacked so as to overlap. 2. Demonstration of back-to-front and front-to-back mouseover. 3. Demonstration of how text is positioned on polygons and how text overlap is avoided. 4. Other milestones to be determined.