title: Pop up label containing coordinate of a dot on canvas when mouse hovers
body: <p>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. </p>
  
  <p>in HTML:</p>
  
  <pre><code>&lt;div id="2" style="position:absolute; top:100px; left:10px;"&gt;
      &lt;canvas id="canvas_prime" width="700" height="500"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>in JS:</p>
  
  <pre><code>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);
  }
  </code></pre>