# Use a mesma conversão de coordenadas para desenhar e detectar cliques

> Converta a posição do ponteiro para o sistema de coordenadas do jogo, mantendo os alvos visíveis alinhados às áreas clicáveis mesmo após uma mudança de escala.

- URL: https://oneshotgems.ai/pt-BR/topics/hit-testing-canvas-coordinates
- Categoria: Para desenvolvedores de jogos
- Tipo: Guia
- Atualizado: 5 de outubro de 2026

Um botão desenhado no canvas pode estar bem abaixo do ponteiro e ainda assim não responder: o evento usa pixels da área visível do navegador, enquanto o jogo desenha em unidades de seu mundo lógico. Escolha um sistema de coordenadas para detectar cliques e converta cada posição do ponteiro considerando a transformação usada para desenhar o campo de jogo. Este guia trata dessa conversão. Ele complementa o planejamento de layouts responsivos acompanhando um ponto desde a página até um alvo lógico, incluindo as faixas vazias ao redor de um jogo de tamanho fixo.

## Subtraia a origem do canvas e aplique a escala ao ponto

Comece com clientX e clientY do evento e o retângulo retornado por canvas.getBoundingClientRect(). Esse retângulo é relativo à área visível do navegador: subtraia seus valores left e top antes de aplicar a escala. Se o jogo lógico mede 800 por 450 e o retângulo exibido mede 400 por 225, multiplique as coordenadas locais x e y por dois. Assim, o centro exibido corresponde ao ponto lógico (400, 225), independentemente da posição de rolagem da página.

Use o retângulo real do conteúdo, sem deduzi-lo pela largura da janela. Considere as bordas CSS e o preenchimento ao redor do canvas e atualize a conversão após mudanças de tamanho ou orientação. Se o jogo usa deslocamento de câmera, faixas vazias ou outra transformação do mundo, desfaça essas operações na ordem inversa antes de comparar o ponto com as formas das áreas clicáveis.

## Teste toda a superfície, inclusive os espaços vazios

Coloque uma mira temporária na posição convertida do ponteiro e teste os quatro cantos do canvas, o centro e cada borda de um alvo. Para verificar a calibração, clique no centro de um círculo desenhado e confirme que o ponto obtido no mundo do jogo fica perto desse centro. Depois, clique logo fora para conferir se o limite de detecção respeita a margem de tolerância prevista. A MDN descreve clientX como relativo à área visível do navegador e getBoundingClientRect() como o método que retorna os limites do elemento em relação à mesma área. Usar essas medidas em conjunto evita misturar sistemas de coordenadas.

## Mantenha o desenho e as áreas clicáveis vinculados

Guarde a posição e as dimensões do alvo no mundo do jogo uma única vez. Use esses dados tanto para desenhá-lo quanto para verificar se o ponteiro está dentro dele. Evite digitar coordenadas de tela separadas para o ícone visível e sua área clicável. Repita os testes ao mudar a escala do canvas, o tamanho CSS, a proporção de pixels do dispositivo ou o deslocamento da câmera. Se a posição de teste estiver correta, mas o alvo continuar sem responder, confira os cálculos da forma e a ordem de processamento da entrada antes de acrescentar deslocamentos arbitrários em pixels.

## Perguntas

**Devo usar offsetX e offsetY para detectar cliques no canvas?** Eles podem ser práticos em um canvas simples, sem transformações. Porém, usar explicitamente as coordenadas do evento, os limites do elemento e a transformação do jogo deixa cada etapa mais clara quando o layout ou a escala da câmera muda.

**Devo incluir devicePixelRatio na conversão do ponteiro?** Somente se o ponto do ponteiro e as formas de detecção usarem pixels do buffer interno do canvas. Uma abordagem comum converte as coordenadas da área visível em unidades lógicas do jogo e deixa a escala de pixels do dispositivo apenas na transformação de renderização.

## Siga sua curiosidade

- [Use eventos de ponteiro para entrada de jogo do navegador](https://oneshotgems.ai/pt-BR/topics/pointer-events-for-games): Modele mouse, caneta e toque por meio de eventos de ponteiro, preservando a captura, a identidade do dispositivo e o comportamento de compatibilidade em um loop de jogo.
- [Crie layouts adaptáveis para jogos de navegador](https://oneshotgems.ai/pt-BR/topics/responsive-game-layouts): Adapte uma superfície de jogo ao seu contêiner sem vincular o estado da simulação às dimensões da tela e teste o layout em janelas de visualização variáveis.

## Leitura complementar

- [MDN clientX](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX)
- [MDN getBoundingClientRect](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)

---
Página canônica: https://oneshotgems.ai/pt-BR/topics/hit-testing-canvas-coordinates