No entiendo por que el instructor toma como coordenadas iniciales 200,50 ... Si tomamos un canvas de 600,400 .... y el rectangulo 1 tiene 350,300 ... para que la figura este centrada en nuestra pantalla las coordenadas iniciales son 125,50 Por otro lado, tampoco define como encuentra la posición Y de la boca, que indica como 240. Yo tome que la nariz llega a la mitad del largo de la boca (55) para poder determinar una ubicación, ya que no existe esa información. Por otro lado, no tenemos la paleta de colores como para saber cual usar. Entonces .. mi programa queda asi ...
<canvas width="600" height="400">
</canvas>
<script>
var pantalla = document.querySelector("canvas"); // llamo la pantalla creada con canvas
var pincel = pantalla.getContext("2d"); // creo un pincel para escribir en la pantalla
pincel.fillStyle = "green"; // rectangulo 1
pincel.fillRect(125,50,350,300);
pincel.fillStyle = "black"; // rectangulo 2
pincel.fillRect(175,105,90,90);
pincel.fillStyle = "black";
pincel.fillRect(335,105,90,90); // rectangulo 3
pincel.fillStyle = "black";
pincel.fillRect(265,195,70,100); // rectangulo 4
pincel.fillStyle = "black";
pincel.fillRect(225,240,40,110); // rectangulo 5
pincel.fillStyle = "black";
pincel.fillRect(335,240,40,110); // rectangulo 6
</script>
