How to append(show) a div to a canvas arc after hovering on the canvas arc?

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
}