How to get X and Y from Canvas Click

2

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?

    
asked by anonymous 20.05.2018 / 02:00

2 answers

0

Create an event click for the canvas area:

document.getElementById("canvas").addEventListener('click', KeyDown, true);

Then include in the function KeyDown() the code to get the click position:

evt.clientX (X axis) and evt.clientY (Y axis)

It is also important to know the distance from the canvas to the top and left so that the position is relative to the canvas and not to the browser window:

canvas.offsetLeft and canvas.offsetTop

See:

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){
   
   var canvas = document.getElementById("canvas");

   // posição dos cliques descontando a distância da borda da janela
   var posX = evt.clientX - canvas.offsetLeft;
   var posY = evt.clientY - canvas.offsetTop;

   console.clear();
   console.log("Posição do clique: ", posX+","+posY);

    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);
document.getElementById("canvas").addEventListener('click', KeyDown, true);
Iniciar();
<div>
  <canvas id="canvas" width="800" height="600">
  Se você visualizar esse texto, seu browser não suporta a tag canvas.
  </canvas>
</div>
    
20.05.2018 / 03:03
0

Buddy I created a Click method, which is called on the click to the canvas. In this event I get the click event, in this event I check if it contains pageX or pageY , if it contains I do not need to perform the calculation to know the position of the click in relation to the page if I do not calculate with the proper properties, I get the subtraction from e.clientX to Y and document.body.scrollLeft to X

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");
    canvas.addEventListener('click', Clique);
    ctx = canvas.getContext("2d");
    return setInterval(Atualizar, 10);
}

function KeyDown(e){
    switch (e.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;
    }

    var px = canvas.clientWidth - x;
    var py = canvas.clientHeight - y;
    console.log(px);
    console.log(py);
}

function Clique(e) {
   var px;
   var py;
   if (e.pageX || e.pageY) { 
      px = e.pageX;
      py = e.pageY;
   } else { 
      px = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
      py = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
   } 
   px -= canvas.offsetLeft;
   py -= canvas.offsetTop;
   console.log('x:', px);
   console.log('y:', py);
}

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>
</body>
</html>
    
20.05.2018 / 03:16