鼠标悬停时弹出包含画布上点坐标的标签

Question

I am new to HTML and JavaScript and want to implement a feature such that on a canvas, I can draw dots by clicking on it, and when I hover the mouse above the dots, it will pop up a label containing the coordinate of the dot. I have implemented the draw dots part, I just can't figure out how to implement the label pop-up part.

in HTML:

<div id="2" style="position:absolute; top:100px; left:10px;">
    <canvas id="canvas_prime" width="700" height="500"></canvas>
</div>

in JS:

var mouseX, mouseY;
function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: (evt.clientX - rect.left),
        y: -(evt.clientY - rect.top)};
}

function drawDot(canvas) {
    var context = canvas.getContext("2d");

    context.beginPath();
    context.arc(mouseX * 50, mouseY * 50, 4, 0, 2 * Math.PI, false);

    context.fillStyle = 'green';
    context.fill();

    context.lineWidth = 1;
    context.strokeStyle = 'yellow';
    context.stroke();

    drawLine_passive(canvas);
}

Answer 1

On canvas's mousemove event, check for reaching mouse on your dot's x, y position. If reached, append a popup div on your canvas's parent with position: absolute and coordinates as your dot's coordinates.