Although I primarily work with Python and not JavaScript, I find myself in need of drawing circles on a web page at the location where a user clicks. Since I rely on Selenium for this task, it's essential for me to precisely pinpoint the click location. However, clicking based on coordinates sometimes leads to incorrect actions, which is why I am looking for a way to control and highlight these clicks.
Despite my attempts using the code snippet below (which unfortunately didn't yield the desired results), I stumbled upon a similar solution. Regrettably, neither approach has provided me with the working solution needed to effectively highlight the clicked areas.
var canv = document.createElement('canvas');
canv.id = 'canvas';
document.body.appendChild(canv);
document.getElementById('canvas').appendChild(canv);
onclick = function showCoords(event) {
var x = event.clientX;
var y = event.clientY;
var radius = 5;
var canvas = document.getElementsByTagName('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(x, y, radius, 40, 0, 2 * Math.PI);
ctx.stroke();
var coords = 'X coords: ' + x + ', Y coords: ' + y;
console.log(coords);
}