Solucionado
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
pincel.fillStyle = 'blue';
pincel.beginPath();
pincel.arc(x, y, 10, 0, 2 * 3.14);
pincel.fill();
console.log(x + ' , ' + y);
Esse é meu código, o que estou fazendo de errado?
Oi Pedro, tudo bem?
Por essa parte que você mandou está tudo certo. Mas seria bom ver o seu código todo.
Irei mandar o código que testei e deu certo:
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'grey';
pincel.fillRect(0, 0, 600, 400);
function desenhaCirculo(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
pincel.fillStyle = 'blue';
pincel.beginPath();
pincel.arc(x, y, 10, 0, 2 * 3.14);
pincel.fill();
console.log(x + ' , ' + y);
}
tela.onclick = desenhaCirculo;
</script>
Você pode conferir aqui o teste que fiz.
Espero ter te ajudado!
Por favor, se não der certo, compartilha seu código todo que aí vamos fazer novos testes.
Um abraço e bons estudos.
<head>
<meta charset="UTF-8">
</head>
<style>
canvas{
width: 600;
height: 400;
/* background-color: black;
border: 5px red solid; */
}
</style>
<!-- ------------------------------------------------------------------------>
<canvas>
</canvas>
<!-- ------------------------------------------------------------------------>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'grey';
pincel.fillRect(0, 0, 600, 400)
function desenhaCirculo(evento){
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
pincel.fillStyle = 'blue';
pincel.beginPath();
pincel.arc(x, y, 10, 0, 2 * 3.14);
pincel.fill();
console.log(x + ' , ' + y);
}
tela.onclick = desenhaCirculo;
</script>
Esse é meu código completo, estou usando o Chrome
Copiei e colei o seu código e mesmo assim está dando erro, não estou entendendo mais nada...
Oi Pedro, desculpe a demora em retornar.
Você pode me dizer onde está testando seu código? Se for pelo VSCODE pode dar um bugzinho na hora de desenhar mesmo, mas se você testar pelo codepen verá que seu código está funcionando certinho.
Você pode conferir aqui.
Isso pode acontecer por causa do desempenho do JavaScript que pode variar entre os navegadores e suas versões. Já CodePen é uma plataforma que fornece um ambiente específico e otimizado para a execução de código, enquanto o VSCode depende do navegador que você está utilizando.
Em linhas gerais, seu código está funcionando certinho.
Um abraço e bons estudos.