How to simulate click on canvas with coordinates?

Question

In web game I wanted to simulate clicks with coordinates. Game interface using canvas

I tried several things, but nothing help.

I tried to make new MouseEvent but it returns me "true" and nothing happened.

const e1 = new MouseEvent("click", {
   clientX: 1673,
   clientY: 866
});

canvas.dispatchEvent(e1)

And this returns me error: canvas.elementFromPoint is not a function

canvas.elementFromPoint(1673,866);

What im doing wrong or canvas may have another methods to simulate clicks?

Answer 1

The purpose of the .elementFromPoint() method is to return a HTML element e.g. a <div>. As such this method is chained to the Document object. That means you can't call it on an instance of a canvas element as it simply ain't available there - thus the error message: canvas.elementFromPoint is not a function

Here's an example:

const e1 = new MouseEvent("click", {
  clientX: 50,
  clientY: 50
});

const canvas = document.getElementById("canvas");
canvas.addEventListener("click", (e) => {
  console.log(document.elementFromPoint(e.clientX, e.clientY));
});

canvas.dispatchEvent(e1);

<canvas id="canvas"></canvas>

Answer 2

The main game canvas should be inside of an html div that could be clicked. That main containing div would be what gets resized, and therefore you could add specific divs to it with appendChild and absolute position them for specific buttons on top of the canvas. Or get the specific cords of clicks from the container div.

Answer 3

In my case event was ignored because there was no

buttons: 1

in event properties.

Answer 4

function simulateCanvasClick(x, y) {
    const rect = canvas.getBoundingClientRect();
    const mouseX = x - rect.left;
    const mouseY = y - rect.top;

    const clickEvent = new MouseEvent('click', {
        clientX: mouseX,
        clientY: mouseY
    });

    canvas.dispatchEvent(clickEvent);
}

simulateCanvasClick(1673, 866);