How can i add a point at a place where i clicked?

Question

Does anyone know how to add a point where the mouse position is clicked? Using the Typescript (or) JavaScript code.

I think for some how I know the solution but I don't know how to implement it. The thing that I know is how to get the X co-ordinates and Y co-ordinates at that particular point and the thing that I don't know is how to implement that.

    function getClickPosition(e) {
     var xPosition = e.clientX;
     var yPosition = e.clientY;
    }

You can do it by dynamically appending divs to some element on the page. Here I've created sample: https://jsbin.com/dofuyafice/3/edit?html,css,js,output — Azamat Zorkanov, Sep 03 '18 at 08:19

score 2 · Accepted Answer · edited Sep 03 '18 at 08:42

2

A quick approach is demonstrated by the snippet

function getClickPosition(e) {
  var p = {
    x: e.clientX,
    y: e.clientY
  }
  drawAt(p);
  return p
}

function drawAt(point) {
  var dotSize = 10; // in px
  var div = document.createElement('div');
  div.style.backgroundColor = "#000"
  div.style.width = dotSize + "px";
  div.style.height = dotSize + "px"
  div.style.position = "absolute"
  div.style.left = (point.x - dotSize / 2) + "px"
  div.style.top = (point.y - dotSize / 2) + "px"
  div.style.borderRadius = "50%"
  root.appendChild(div);
}

document.getElementById("root").addEventListener('click', function(e) {
  getClickPosition(e);
})

<div id="root" style="width: 400px; height: 300px; background-color: #ccc"></div>

however, you might wanna look into the HTML canvas

edited Sep 03 '18 at 08:42

marsze

15,079
5
45
61

answered Sep 03 '18 at 08:12

andylamax

1,858
1
14
31

2

Nice, additionally if you want it on mousedown/mouseup instead of click (draw) you could do it like https://jsbin.com/xobiqedasa/edit?html,js,output – Lawrence Cherone Sep 03 '18 at 08:40
Also consider scroll position. – marsze Sep 03 '18 at 08:43
Wow! The above code solved my issue really thank you man.......... for your help. – Naveen Kumar Sep 03 '18 at 09:43
@NaveenKumar yo welcome – andylamax Sep 03 '18 at 09:45

How can i add a point at a place where i clicked?

1 Answers1