Dibujando a mi Creeper | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<canvas width="350" height="300">


</canvas>

<script>

    var pantalla= document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

    pincel.fillStyle= "darkgreen"; //propiedad
    pincel.fillRect(0,0,350,300);   //funcion

    //Ojos

    pincel.fillStyle= "black"; //propiedad
    pincel.fillRect(50,50,90,90);   //funcion

    pincel.fillStyle= "black"; //propiedad
    pincel.fillRect(210,50,90,90);   //funcion

    //nariz
    pincel.fillStyle= "black"; //propiedad
    pincel.fillRect(140,140,70,100);   //funcion

    //boca

    pincel.fillStyle= "black"; //propiedad
    pincel.fillRect(100,190,40,110);   //funcion


    pincel.fillStyle= "black"; //propiedad
    pincel.fillRect(210,190,40,110);   //funcion

</script>

<body>

</body>
</html>

pincel.fillStyle= "black"; //propiedad pincel.fillRect(50,50,90,90); pincel.fillRect(210,50,90,90); pincel.fillRect(140,140,70,100); pincel.fillRect(100,190,40,110); pincel.fillRect(210,190,40,110);