Placing a custom menu over Canvas

Question

Hello Forum,
since I dont know what describes my problem, I cannot google it. This has been bothering me since weeks now, so I hope someone here could point me the direction:
I�m working on a painting tool. The user draws shapes on a canvas, draws relations between them, assignes names and so on.
The user must also be able to edit further attributes of each shape. Therefore I want a small custom menu to pop up when he double clicks a shape.
The upcoming pop-up menu (containing some textfields and a button) must be special shaped (bouble or rounded e.g.) and there must be a visible connection to the shape that has been clicked. Like a line between the menu and the shape.
The well-known context menu seems to not fit my plans, since I dont know how to customize it so far.
Could you please give me a direction to google in? Im thankful for every advice :)
Thanks,
Peter

Answer 1

Apply the image as a background image to <section> and have two divs following normal document flow called <header> and <nav>
The html will look like
<section id="pageHeader">
  <header> .... </header>
  <nav> ... </nav>
</section>
The style rules look like
#pageHeader { background: YOUR IMAGE; }
#pageHeader header { height: YOUR HEIGHT; }
#pageHeader nav { width: YOUR WIDTH; height: YOUR HEIGHT; margin-right: YOUR MARGIN;  float: right }
The main menu items will have transparent backgrounds to allow the background image to show through