title: Canvas text click not working. How to fix?
body: <p>JS Code -</p>
  <pre><code>var canvas = document.getElementById(&quot;canvas&quot;);
  var ctx = canvas.getContext(&quot;2d&quot;);
  var $canvas = $(&quot;#canvas&quot;);
  var BB=canvas.getBoundingClientRect();
  var offsetX = BB.left;
  var offsetY = BB.top;
  var mx;
  var my;
  var texts = [];
  var images = [];
  var dragF = -1;
  var mode = &quot;none&quot;;
  
  function print(log) {
      console.log(log)
  }
  
  function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      for(const { text, x, y, width, height } of texts) {
          ctx.fillText(text, x, y);
          // trace
          ctx.strokeRect(x, y, width, height);
      }
  }
  
  function addNewText(string_text, arrayname) {
      var y = texts.length * 20 + 20;
      var text = {
          text: string_text,
          x: 20,
          y: y,
          name: arrayname
      };
      ctx.font = &quot;32px verdana&quot;;
      ctx.textBaseline = &quot;top&quot;;
      text.width = ctx.measureText(text.text).width;
      text.height = 32;
  
      texts.push(text);
      draw();
  }
  
  function hitDrag(x,y,textIndex) {
      var r=texts[textIndex];
      return (x&gt;r.x &amp;&amp; x&lt;r.x+r.width &amp;&amp; y&gt;r.y &amp;&amp; y&lt;r.y+r.height);
  }
  
  function myDown(e) {
      e.preventDefault();
      e.stopPropagation();
  
      mx=parseInt(e.clientX-offsetX);
      my=parseInt(e.clientY-offsetY);
  
      for(var i=0;i&lt;texts.length;i++){
          if(hitDrag(mx,my,i)){
              print(&quot;found&quot;);
              dragF = i;
          }
      }
  }
  
  $(&quot;#canvas&quot;).mousedown(function(e) { 
      myDown(e);
  });
  
  addNewText(&quot;Hello world&quot;, &quot;text 1&quot;);
  </code></pre>
  <p>So I followed @Kaiido advice with the BBox and I changed textBaseline to &quot;top&quot;. Which fits perfectly. Now when I run his code snipper under my help forum, it seems to work and print &quot;found&quot; (which shows it works). When I run it, it doesn't seem to work. What could be the reason for this.</p>
  <p>His Code working: <a href="https://gyazo.com/511bf35523fcb3ea8a26c2b088530f99" rel="nofollow noreferrer">https://gyazo.com/511bf35523fcb3ea8a26c2b088530f99</a></p>
  <p>My coding not working: <a href="https://gyazo.com/743c38f6a33a7f1f4513bac361c23588" rel="nofollow noreferrer">https://gyazo.com/743c38f6a33a7f1f4513bac361c23588</a></p>
  <p>HTML Code -</p>
  <pre><code>&lt;div id=&quot;middle_container&quot;&gt;
              &lt;div class=&quot;center_container&quot;&gt;
                  &lt;canvas id=&quot;canvas&quot;&gt;&lt;/canvas&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  <p>CSS Code -</p>
  <pre><code>  #canvas {
          height: 667px;
          width: 800px;
          touch-action: auto;
          cursor: inherit;
          visibility: visible;
          border: 1px solid grey;
      }
  </code></pre>