I would like to get X and Y from a click on my canvas.
var canvas;//o elemento canvas sobre o qual desenharemos
var ctx;//o "contexto" da canvas que será utilizado (2D ou 3D)
var dx = 5;//a tava de variação (velocidade) horizontal do objeto
var dy = 5;//a tava de variação (velocidade) vertical do objeto
var x = 250;//posição horizontal do objeto (com valor inicial)
var y = 100;//posição vertical do objeto (com valor inicial)
var WIDTH = 800;//largura da área retangular
var HEIGHT = 600;//altura da área retangular
function Desenhar() {
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.arc(x, y, 10, 0, Math.PI*2, true);
ctx.fill();
}
function LimparTela() {
ctx.fillStyle = "white";
ctx.strokeStyle = "black";
ctx.beginPath();
ctx.rect(0, 0, WIDTH, HEIGHT);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
function Placar(){
ctx.font = "14px Arial";
ctx.fillStyle = "red";
ctx.fillText('X = '+ x,745,10);
ctx.fillText('Y = '+ y,745,25);
}
function Iniciar() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
return setInterval(Atualizar, 10);
}
function KeyDown(evt){
switch (evt.keyCode) {
case 38: /*seta para cima */
if (y - dy > 0){
y -= dy;
}
break;
case 40: /*set para baixo*/
if (y + dy < HEIGHT){
y += dy;
}
break;
case 37: /*set para esquerda*/
if (x - dx > 0){
x -= dx;
}
break;
case 39: /*seta para direita*/
if (x + dx < WIDTH){
x += dx;
}
break;
}
}
function Atualizar() {
LimparTela();
Desenhar();
Placar();
}
window.addEventListener('keydown', KeyDown, true);
Iniciar();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas</title>
</head>
<body>
<div>
<canvas id="canvas" width="800" height="600">
Se você visualizar esse texto, seu browser não suporta a tag canvas.
</canvas>
</div>
<script type="text/javascript" src="desenhar_circulo.js"></script>
</body>
</html>
How do I do this?