Web Canvas with Opacity-control on Shapes

This project was awarded to technokeens for $1529 USD.

Get free quotes for a project like this
Employer working
Awarded to:
Skills Required
Project Budget
$1500 - $3000 USD
Total Bids
Project Description

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

[url removed, login to view]

[url removed, login to view]

This is the Reverse "C" shape in green

[url removed, login to view]

This is the desired hexagon style - [url removed, login to view]

Thick border with text inside the hexagon.

Below I show examples of the translucent/opacity

[url removed, login to view]

[url removed, login to view]

[url removed, login to view]

Below is an example of the snap-to-grid canvas for hexagons

[url removed, login to view]

An example of how hexagons could be stacked.

[url removed, login to view]

I also found this library to help the hexagon creation

[url removed, login to view]

The second generation of the project will be to make advanced shapes - any kind of curved polygon.


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.


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.


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.

Looking to make some money?

  • Set your budget and the timeframe
  • Outline your proposal
  • Get paid for your work

Hire Freelancers who also bid on this project

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online