Tengo una pregunta quiiera dibujar un plano cartesiano como lo entendemos las personas, en lo lienzos de Js el navegador lo interpreta de manera diferente, mi meta es algo asi
Al dar click que me imprima en consola las coordenadas de esa forma y se dibuje un punto
<!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>Programa 3</title>
</head>
<body>
<canvas width="600" height="400"></canvas>
<a href="relog.html">Ver relog</a>
</body>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = "lightgray";
pincel.fillRect(0, 0, 600, 400);
var color = "blue";
function exibirAlerta(evento, saludo){
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop
console.log(evento, saludo);
alert("Ud. hizo click en x: "+ x + " y: " + y);
}
function dibujarCirculo(evento){
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop
pincel.fillStyle = color;
pincel.beginPath();
pincel.arc(x,y,10,0,2*3.14);
//pincel.arc(x,y,radio,anguloInicial,anguloFinal);
pincel.fill();
console.log(x + " , " + y);
}
function alterarColor() {
//alert("Funcionó");
if(color=="blue"){ color = "red";}
else if(color=="red"){ color = "green";}
else if(color=="green"){ color = "blue";}
return false;
}
pantalla.oncontextmenu = alterarColor;
//pantalla.onclick = (e)=> exibirAlerta( e, "¡Hola!");
pantalla.onclick = dibujarCirculo;
</script>
</html>