Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Minha versão. Menor mas acertada.

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 Eliezer Araújo
| 101.8k xp | 162 posts

Não sei porque meu canvas não aparece com 600 e 400. Só até o máx de y = 150. Não sei explicar. Por isso, reduzi as medidas e dei conta da tarefa.

<body>
    <canvas width="200" heigth="150"></canvas>
    <script>
        var tela = document.querySelector("canvas");
        var pincel = tela.getContext("2d");

        pincel.fillStyle = "darkgreen";
        pincel.fillRect(0, 0, 200, 150);

        pincel.fillStyle = "black";
        pincel.fillRect(40, 20, 40, 40);

        pincel.fillStyle = "black";
        pincel.fillRect(120, 20, 40, 40);

        pincel.fillStyle = "black";
        pincel.fillRect(80, 60, 40, 60);

        pincel.fillStyle = "black";
        pincel.fillRect(55, 90, 25, 60);

        pincel.fillStyle = "black";
        pincel.fillRect(120, 90, 25, 60);

    </script>
</body>
1 resposta
solução!
por Cássio Murilo
| 1282.3k xp | 2204 posts
Instrutor

Fala, Eliezer!!! Como vai?

Meu amigo, fiz novamente em cima do seu código, somente alterando as configurações do próprio código e consegui aumentar. Eu só retirei o body

Segue o código que alterei:

<canvas width="600" height="400"></canvas>
<script>
    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");

    pincel.fillStyle = "darkgreen";
    pincel.fillRect(200,50,350,300);

    pincel.fillStyle = "black";
    pincel.fillRect(250, 110, 90, 90);

    pincel.fillStyle = "black";
    pincel.fillRect(410, 110, 90, 90);

    pincel.fillStyle = "black";
    pincel.fillRect(340, 200, 70, 100);

    pincel.fillStyle = "black";
    pincel.fillRect(300, 240, 40, 110);

    pincel.fillStyle = "black";
    pincel.fillRect(410, 240, 40, 110);

</script>

Dê uma olhada e nos retorne! ;-)