Buen dia, me resulto un poco complejo seguir el orden de los datos proporcionados, asi que comence primero por la boca.
Despues de checar la opinión del instructor veo que me quedo muy similar, acontinuacion les detallo como interprete la solución por si alguien más le ayuda.
1.- definir area de dibujo (600,400)(x,y) respectivamente. 2.- definir el cuadro verde oscuro, trate de dejarlo lo mas centrado posible.(350,300)(x,y) respectivamente, para ello tome como referencia lo siguiente.
Datos: 600(aréa de dibujo)-350(cara verde)=250, eso quiere decir que tengo libre por lado(derecha e izquierda) 125 lado X (en el aréa de dibujo, para el lado y hacemos la misma analogia 400(aréa de dibujo)-300(cara verde)=100, eso quiere decir que tengo libre por lado(arriba y abajo) 50 lado Y.
Entonces la cara verde quedaria asi (125,50,350,300)
Personalmente se me dificulto comenzar por los ojos, mejor comence por la nariz ya que se encuentra en el centro del area de dibujo y el area verde. para el eje X solo reste los 300(mitad de 600) del area de dibujo menos los 35(mitad de la boco 70)= 265 y para el eje Y solo deduje que si esta en la mitad del aréa de dibujo seria 200.
Entonces la nariz quedaria asi (265,200,70,100)
para los ojos ya fue mas facil porque ya tenemos un punto de partida que es la boca, ahora solo restamos.
Si la nariz esta a 265 restamos la medida de la nariz en X 265-90=175, en Y hacemos lo mismo restamos a mitad del aréa de dibujo en Y 200-90= 110.
Entonces el ojo izquierdo quedaria asi (175,110,90,90)
Para el ojo derecho hacemos los mismo ya tenemos de referencia la nariz, 300+35(la otra mitad de la nariz) =335 y seguimos tomando el mismo eje Y.
Entonces el ojo derecho quedaria asi (335,110,90,90)
Por ultimo finalizamos con la boca, aqui ya todo es mas sencillo, tenemos muchos puntos de partida, particularmente tome la nariz.
para la boca derecha considere la mitad del aréa de dibujo menos la mitad de la nariz y la boca derecha 300-35-40=225 X y para el lado Y considere todo el lado Y del area verde(300) más el pedazo de aréa de dibujo de la parte de arriba(50) lo sume y lo reste con los 110 de la boca en Y 300+50-110=240 Y.
Entonces la boca izquierda quedaria asi ( 225,240,40,110)
Y para el lado derecho mismo procedimiento sacamos X de todos los datos que tenemos mitad del aréa de dibujo 300 y mitad de la nariz(35) 300+35= 335 y Y tomamos el mismo valor de 240.
Entonces la boca izquierda quedaria asi (335,240,40,110)
A continuación dejo mi codigo.
Saludos.
<canvas width ="600" height="400"> </canvas>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = "darkgreen";//propiedad cara
pincel.fillRect(125,50,350,300); // función
pincel.fillStyle = "black"; //propiedad ojos
pincel.fillRect(175,110,90,90); // función ojo izquierdo
pincel.fillRect(335,110,90,90); // función ojo derecho
pincel.fillStyle = "black"; //propiedad nariz
pincel.fillRect(265,200,70,100); // función
pincel.fillStyle = "black"; //propiedad
pincel.fillRect(225,240,40,110); // función boca izquierda
pincel.fillRect(335,240,40,110); // función boca derecha
