在画布中动态添加下拉列表

Question

I want to create a canvas that allow writing chemical formula the idea is to use hexagone which can be clicked on his summit to change the atom. So when we click on the hexagone summit a dropdown menu appear in which we can choose the atom. I can add a dropdown menu as a sibling to the canvas and position it thanks to a container but how could I dynamically (on mouse click) add a dropdown menu on canvas.

an example of the dropdown menu

Any idea, reflexion are welcome. I've made a simple hexagone which can be the represntation of a cyclohexane for those who have code suggestion

 var canvas = document.querySelector('#canvas').getContext('2d'),side = 0, size = 100, x = 100, y = 100; canvas.beginPath(); canvas.moveTo(x + size * Math.cos(0), y + size * Math.sin(0)); for (side; side < 7; side++) { canvas.lineTo(x + size * Math.cos(side * 2 * Math.PI / 6), y + size * Math.sin(side * 2 * Math.PI / 6)); } canvas.stroke(); 

 #canvas { width: 200px; height: 200px; } 

 <canvas id="canvas" width="400" height="400"></canvas> 

Answer 1

What I would do is:

1. Have an invisible dropdown box already on the page, outside of the canvas element
2. On click of the canvas, check and see if the user clicked on a hexagon. (check if distance from mouse click is within the bounds of any hexagons on screen)
3. If it is within the bounds of a hexagon, move the invisible dropdown box to the location of the hexagon and then turn it visible.

If you need an example let me know.

I've coded an example in the following CodePen: https://codepen.io/darrylhuffman/pen/OqmBja

Here is the logic I am using to determine if the user clicked on an atom, and then to move the dropdown box:

document.body.addEventListener('mouseup', e => {
    let atom = atoms.find(a => distance(a.position, { x: e.pageX, y: e.pageY}) <= a.r)
    atomDropdown.classList.remove('hidden')
    if(atom){
       atomDropdown.style.left = atom.position.x + 'px'
       atomDropdown.style.top = (atom.position.y + atom.r) + 'px'
    }
})

Be sure to read into all of my code in the CodePen though, because I believe you may want to take the approach I did when it comes to generating atoms/bonds/etc.