title: Trigger click event at X, Y coordinates of canvas using pure (vanilla) JS
body: <pre class="lang-html prettyprint-override"><code>&lt;canvas id="MyCanvas" width="800" height="600"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>I want to simulate a click at some position (ex. x=200, y=150).</p>
  
  <pre><code>var MyCanvas = document.getElementById('MyCanvas');
  MyCanvas.click(200, 150);
  </code></pre>
  
  <p>Above code does't work. The same with below slightly modified one:</p>
  
  <pre><code>var MyCanvas = document.getElementById('MyCanvas');
  MyCanvas.click({pageX: 200, pageY: 150});
  </code></pre>
  
  <p>... and with below code copied from <a href="https://stackoverflow.com/questions/10305477/simulate-click-at-x-y-coordinates-using-javascript#19570419">Simulate click at x/y coordinates using javascript</a>.</p>
  
  <pre><code>function simulateClick(x, y) {
      var clickEvent = document.createEvent('MouseEvents');
      clickEvent.initMouseEvent(
          'click', true, true, window, 0,
          0, 0, x, y, false, false,
          false, false, 0, null
      );
      document.elementFromPoint(x, y).dispatchEvent(clickEvent);
  }
  simulateClick(200, 150);
  </code></pre>
  
  <p>Below is the code based on the above one but this doesn't work too.</p>
  
  <pre><code>function simulateClick(x, y){
      document.elementFromPoint(x, y).click();
  }
  simulateClick(200, 150);
  </code></pre>
  
  <p>The last code doesn't trigger a click as well.</p>
  
  <pre><code>function simulateClick(targetCanvas, x, y) {
      var clickEvent = new MouseEvent(
          "click",
          {
              clientX: x,
              clientY: y,
              bubbles: true
          }
      );
      targetCanvas.dispatchEvent(clickEvent);
  }
  var MyCanvas = document.getElementById('MyCanvas');
  simulateClick(MyCanvas, 200, 150);
  </code></pre>