<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Capturar Posicion usando Evento "onclick" "oncontentmenu"</title>
</head>
<body>
<canvas width="600" height="400"></canvas>
</body>
<script>
//variables
var colores = ["blue", "red", "green"]
var board = document.querySelector("canvas")
var pen = board.getContext("2d")
//Pizarra-Rectangular
pen.fillStyle = "lightblue"
pen.fillRect(0, 0, 600, 400)
var alterColor = 0
//f(x)s
const capturarCoordenadasXY = (evento) => {
//Capturar la coordenadas al dar click.
var x = evento.pageX - board.offsetLeft;
var y = evento.pageY - board.offsetTop;
alert(`La posicion el click fue el eje X = ${x} y Y= ${y} `)
}
//f(x) Circulo
const crearCirculo = (evento) => {
var x = evento.pageX - board.offsetLeft;
var y = evento.pageY - board.offsetTop;
pen.fillStyle = colores[alterColor];
pen.beginPath(); //Posicionamiento inicial
pen.arc(x, y, 10, 0, 2 * Math.PI)
pen.fill();
console.log(`${x} , ${y}`)
}
//Invoke
board.onclick = crearCirculo; //Muestra un circulo por cada cada click dado dentro del canvas en la coordenada X y Y seleccionado por el usuario
const alterarColor = () => {
alterColor++; //Invocando variable global como contador
while (alterColor >= colores.length) { //Cual la longitud del arreglo es alcanzado volver el contador a 0
alterColor = 0
}
alert(`El color selecionado es el ${colores[alterColor]}`) //Cuando el Click derecho es apretado muestra el mensaje con el color seleccionado
return false //Esconde el menu del canvas
}
board.oncontextmenu = alterarColor; //Usar el click Derecho para el cambio de color del circulo
</script>
</html>
