Steve no Canvas | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Gostei tanto de usar o Canvas que fiz o Steve também, personagem que você joga no Minecraft.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <canvas width="550" height="550">

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

        //cabeça
        pincel.fillStyle = "#a6662c";
        pincel.fillRect(0,0,550,500);

        //cabelo topo
        pincel.fillStyle = "#583415";
        pincel.fillRect(0,0,550,155);

        //cabelo lado esquerdo
        pincel.fillStyle = "#583415";
        pincel.fillRect(0,140,90,60);

        //cabelo lado direito
        pincel.fillStyle = "#583415";
        pincel.fillRect(460,140,90,60);

        //parte branca do olho esquerdo
        pincel.fillStyle = "white";
        pincel.fillRect(90,250,60,60);

        //parte roxa do olho esquerdo
        pincel.fillStyle = "#47349e";
        pincel.fillRect(150,250,60,60);

        //parte branca do olho direito
        pincel.fillStyle = "white";
        pincel.fillRect(397,250,60,60);

        //parte roxa do olho direito
        pincel.fillStyle = "#47349e";
        pincel.fillRect(337,250,60,60);

        //nariz
        pincel.fillStyle = "#b86d29";
        pincel.fillRect(210,310,125,60);

        //barba lado esquerdo
        pincel.fillStyle = "#583415";
        pincel.fillRect(150,370,60,130);
        
        //barba lado direito
        pincel.fillStyle = "#583415";
        pincel.fillRect(337,370,60,130);

        //boca
        pincel.fillStyle = "#b2522a";
        pincel.fillRect(211,370,125,60);

        //barba do queixo
        pincel.fillStyle = "#583415";
        pincel.fillRect(210,430,127,70);

    </script>


</body>
</html>

![]( Insira aqui a descrição dessa imagem para ajudar na acessibilidade )