Como pegar as coordenadas de um clique num canvas JavaScript

Neste artigo você vai aprender a como pegar as coordenadas de um clique num canvas, utilizando a linguagem JavaScript

Fala programador(a), beleza? Bora aprender mais sobre JavaScript com canvas!

Basicamente vamos precisar selecionar o elemento de canvas

Adicionar um evento de clique no mesmo, para poder disparar uma funçao

E depois utilizaremos getBoundingClientRect, que é um método

Este método contém as informações sobre as coordenadas acessadas em um elemento

Veja um exemplo prático:

const canvasEl = document.querySelector("#myCanvas")

canvasEl.addEventListener("click", (e) => {

    const elRect = e.target.getBoundingClientRect()
    const x = e.clientX - elRect.left
    const y = e.clientY - elRect.top
    
    console.log(`Eixo X: ${x} Eixo Y:  ${y}`)

})

Na primeira linha temos a seleção do elemento de canvas, você deve mudar o id para o seletor do seu elemento

Após a seleção temos o evento de click, e a obtenção das coordenadas com a ativação de getBoundingClientRect

São feitas duas subtrações para conseguir a coordenada, e temos o resultado final sendo impresso

Deixe um comentário contando o que achou deste artigo 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Neste artigo você aprendeu a como pegar as coordenadas de um clique num canvas em JavaScript

Tivemos que selecionar o elemento alvo, que é o canvas

E depois acessar as coordenadas através do método getBoundingClientRect

Algumas operações de subtração foram feitas para pegar a coordenada

Note que o método possui outras propriedades, sugiro você a explorar o mesmo e conhecer melhor o que ele pode fazer

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!