How create HTML element in certain X and Y positions

Question

I have a simple project idea, the project is that you click on the display and create a point and click again to make the second point and connect these two points, my problem is how to create HTML elements in the same mouse position. For example, I click on the position: X: 69, Y: 41 I want to create the HTML element in the same position, I know how to get the mouse position:

const mousePos = (e: PointerEvent) => {
  const _Xpos: number = e.clientX;
  const _Ypos: number = e.clientY;
};
window.addEventListener("click", mousePos);

[Possible dupe](https://stackoverflow.com/questions/52099450/how-to-draw-line-between-points-using-click-event-handler) --- [many more](https://www.google.com/search?q=javascript+create+line+endpoints+coordinates+click+site:stackoverflow.com) — mplungjan, Dec 11 '22 at 07:14

score 2 · Accepted Answer · answered Dec 11 '22 at 07:52

If you only want to compose an image, then I recommend you better using a canvas.

However, If you want HTML, you'd need a fullscreen container (div height:100vh, width:100wh or 100%) with position relative.

Then, on click, you add a child to it with position absolute and left=x top=y.

To make it easy, better use css for positioning:

.container { position: relative; } .container > * { position: absolute; }

then, on click:

const e = document.createElement("div");
container.appendChild(e);
e.style.top = _Xpos + "px";
e.style.left = _Ypos + "px";

How create HTML element in certain X and Y positions

1 Answers1