O navegador não compila meu código do canvas como concerto?

Oi Fabio, de onde ta vindo a variável alerttela ?

Então eu tirei ela, haha, obrigado pelo toque, porém mesmo assim o meu código não funciona

<canvas id= "tela" width="600" height="400">


<script>

var tela = document.getElementById("tela");
var c = tela.getContext("2d");

c.fillStyle = "gray"
c.fillRect(0, 0, 600, 400);
tela.onclick = atira;
var atira = function(evento){
    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offtesTop


    c.fillStyle = "blue";
    c.beginPath();
    c.arc(x, y, 10, 0, 2 * 3.14);
    c.fill();

    console.log("posição do clique: " + x + ", " + y);
}








</script>

Eu não tinha percebido.. essa linha aqui tela.onclick = atira; precisa estar depois da definição da função... Quando vc coloca antes, a função atira ainda não existe e vc atribui undefinedpara o evento.

1° - O erro ocorre porque você esta tentando executar uma função cuja qual não foi definida ainda, ou seja o programa tenta executar a função "tela.onclick = atira;" não encontra nada, então por sua vez não mostra nada, logo em seguida ele lê o bloco de instrução da função atira "var atira = function(evento) { ". Para solucionar o problema basta apenas colocar "tela.onclick = atira;" depois do bloco de instrução.

2° - Outro erro é que você se esqueceu de fechar a tag canvas: "" (abre canvas) "" (fecha canvas)

3° - Outro erro é que você se esqueceu de colocar "set" antes da palavra Top na instrução e o " ; " (ponto e vírgula depois da palavra Top). E a um erro de digitação "tela.offtesTop" (este "te" não faz parte do código).

Instrução do seu código: var y = evento.pageY - tela.offtesTop

Como deveria ser a instrução: var y = evento.pageY - tela.offtesetTop;

4° - Faltou " ; " (ponto e vírgula) após a instrução:

c.fillStyle = "gray"

Deveria ser: c.fillStyle = "gray";

O código ficará assim:

<canvas id="tela" width="600" height="400"></canvas>

<script>

var tela = document.getElementById("tela");
var c = tela.getContext("2d");

c.fillStyle = "gray";
c.fillRect(0,0,600,400);

var atira = function(evento) {
    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;

    c.fillStyle = "blue";
    c.beginPath();
    c.arc(x, y, 10, 0, 2 * 3.14);
    c.fill();

    console.log("posição do clique: " + x + ", " + y);
}

tela.onclick = atira;

</script>

Espero ter ajudado.