Quiero poder pintar o dibujar un círculo/punto cada vez que el usuario haga clic dentro de un rectángulo. Debería ser posible agregar tantos círculos/puntos como clics y su posición cambia dependiendo de las coordenadas donde se hizo el clic. Este es el código que estoy usando:
Circulo:
<circle cy="50" cx="50" r="30" fill="#f"></circle>Código que estoy usando: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_mouse_clientxy2
¿Qué debo agregar en este código para que haga lo que quiero?
Debe agregar la etiqueta <circle> en una etiqueta <svg> .
const svg = document.querySelector('svg'); svg.addEventListener('click', e => { const { pageX, pageY, currentTarget } = e; const { left, top } = currentTarget.getBoundingClientRect(); const { pageXOffset, pageYOffset } = window; const x = pageX - left - pageXOffset; const y = pageY - top - pageYOffset; const diameter = Math.floor(Math.random()*100); svg.innerHTML += createCircle({ x, y }, diameter); }); function createCircle(center, diameter) { const randomColor = Math.floor(Math.random()*16777215).toString(16); return ` <circle cx="${center.x}" cy="${center.y}" r="${diameter/2}" fill="#${randomColor}" ></circle> `; } .container { border: 1px solid #000; height: 300px; width: 500px; } svg { height: 100%; width: 100%; } <div class="container"> <svg xmlns="http://www.w3.org/2000/svg"></svg> </div> Además, se cambiaron las propiedades de clientX/Y para considerar el contenedor, las compensaciones/coordenadas de ventana para la compatibilidad de desplazamiento.