悬停在画布弧上后，如何将div附加（显示）到画布弧上？

Question

Simply, my program is to put annotations on image. when the user clicks with the mouse on specific point on the image, it draws a canvas arc containing a number(that is working). What i wanna add is when the user clicks on the image, it draws the canvas arc containing a number and shows a div containing two editable text areas and when the mouse leaves, the 2 text areas go hidden with respect to save the position of each annotation with the values in the 2 text areas.

here is my code:

<canvas width="1600" height="1600" 
style="background-image:url('dermatome.jpg');" id="special">
    <div id="re">
        <textarea id="text1" rows="4" cols="50" hidden></textarea>
        <textarea id="text2" rows="4" cols="50" hidden></textarea>
    </div>
</canvas>

    <script>

     var count = 1;

     jQuery(document).ready(function(){
     $("#special").click(function(e){ 

        //get mouse coordinates
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop; 


        var ctx= this.getContext("2d"); 
        ctx.beginPath();

        ctx.arc(x, y, 20,0, 2*Math.PI);
        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fill();
        ctx.font = '17pt Calibri';
        ctx.fillStyle = 'white';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle'
        ctx.fillText(count, x, y);
        count++;

        $(this).mouseover(function() {
        $('#re').show();    })         });         })         </script>

Answer 1

What i wanna add is when the user clicks on the image [ #1 ], it draws the canvas arc containing a number [ #2 ] and shows a div containing two editable text areas [ #3 ] and when the mouse leaves [ #4 ], the 2 text areas go hidden [ #5 ] with respect to save the position of each annotation with the values in the 2 text areas [ #6 ].

1. Listen for clicks on the canvas using #special's .click .

2. Use your "numbered arc" code from your question.

3. Canvas cannot be a parent so wrap #special & #re in a new container div (#wrapper).

   • Set #wrapper as position:relative and #special & #re as position:absolute .
   • On #special's click, set #re's left & top positions to the click position.
   • Use #re's .show to toggle its visibility to visible.
   • Use #text1's & #text2's .val to fill / clear their text contents as desired. If you want to re-show the users previous texts, fetch those previous texts from the appropriate javascript object and refill the text using .val(annotations[n].text1) and .val(annotations[n].text2) .

4. "...when the mouse leaves" ... hmmmmmm, leaves what? Perhaps help the user understand better by adding a "Save" button with the 2 textareas.

5. Use #re's .hide to toggle its visibility to hidden.

6. Use a javascript object to save the click position and the textarea values.

    var annotations=[]; annotations.push({ x:x, // == x from #special's click handler y:y, // == y from #special's click handler text1: $('#text1').val(), text2: $('#text2').val(), }); 

If you want the user be able to click on a previous numbered circle, you can test the mouseclick position vs each [x,y] in annotations[] using this mouse-in-circle formula:

var dx=mouseX-annotations[n].x;
var dy=mouseY-annotations[n].y;
if(dx*dx+dy*dy<20*20){  // 20 is the radius of your circle ;-)
    // the mouse is inside circle#n
}