Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Não aparece nada no meu navegador!

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Desenhando gráficos com Canvas e atividade A cara do Creeper

por Juliana Carla Santos da Silva
| 28.2k xp | 9 posts
Estudante

eu segui todos os passos dos vídeos, mas na hora de executar não aparece nada, porem quando eu copiei a resposta do instrutor apareceu. No depurador aparece: Uncaught TypeError: Cannot set property 'fillStyle' of null at creeper.html:7

ou aponta um erro na linha 5.

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

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext ('2D');

    pincel.fillStyle= 'green' ;
    pincel.fillRect=(0, 0, 200, 400);

</script>

por que meu codigo não funciona?

3 respostas
por Gabriel Leite
| 3485k xp | 5398 posts
Instrutor

Boa noite, Juliana! Como vai?

O problema é que o 2d deve ser escrito com d minúsculo! O correto é:

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

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle= 'green' ;
    pincel.fillRect=(0, 0, 200, 400);

</script>

Grande abraço e bons estudos!

por Juliana Carla Santos da Silva
| 28.2k xp | 9 posts
Estudante

olá gabriel, muito obrigada pela ajuda, mas mesmo assim, colando o código que você me manodu continua sem aparecer nada na tela e nem no console.

solução!
por Gabriel Leite
| 3485k xp | 5398 posts
Instrutor

Oi, Juliana! Como vai?

Ah sim, me perdoe! Me passou despercebido um sinal de = perdido no meio dessa linha pincel.fillRect=(0, 0, 200, 400);. Esse erro aconteceu pq fillRect é uma função, então deve ser chamada utilizando os () sem o sinal de = entre a palavra fillRect e os (). O correto é:

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

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle= 'green' ;
    pincel.fillRect(0, 0, 200, 400);

</script>

Grande abraço e bons estudos!