Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

meu código ficou assim, alguém pode me dar umas dicas de como melhorá-lo?

fiz desse jeito, alguém pode me dar umas dicas de como melhorá-lo?

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

<script>

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


    //retangulo 1: rosto 350, 300
    pincel.fillStyle = 'darkgreen';
    pincel.fillRect(0,0, 500, 400);

    //retangulo 2: olho esquerdo 90, 90 
    pincel.fillStyle = 'black';
    pincel.fillRect(80,75, 120, 120);

    //retangulo 3: olho direito 90, 90 
    pincel.fillStyle = 'black';
    pincel.fillRect(300,75, 120, 120);

    //retangulo 4: nariz 70, 100
    pincel.fillStyle = 'black';
    pincel.fillRect(200, 195, 100, 140);

    //retangulo  5 e 6: 40, 110 (parte da boca)
    pincel.fillStyle = 'black';
    pincel.fillRect(300, 250, 60, 180);

    pincel.fillStyle = 'black';
    pincel.fillRect(140, 250, 60, 180);



    </script>
2 respostas
solução!

Está excelente, Karina!

Talvez você pudesse fazer uma function chamada pintaRetangulo que recebe uma cor e as coordenadas x e y e a largura e a altura.

Mais ou menos isso:

function pintaRetangulo(cor, x, y, largura, altura) {
    pincel.fillStyle = cor;
    pincel.fillRect(x, y, largura, altura);
}

Aí, na hora de pintar o rosto, por exemplo, seria:

   pintaRetangulo('darkgreen', 0, 0, 500, 400);

Você acha que o seu código ficaria melhor assim?

Muito obrigada! Arrasou!