Se que no es clase de matemáticas , pero tengo la duda de que los calculos del grafico creado no son los correctos, independientemente de la posición inicial , ya que sus cálculos en la posición Y son irregulares, se tiene un canvas de 600 x 400 , dibuja un cuadrado que es el rostro del personaje de medidas 350 x 300 , el inicia en la posición 200 x 50, en el eje x parte correctamente y termina correctamente pero en el eje y hay un error , ya que inicia en la posicion 50 , tomando en cuenta que tenemos un rostro de 300 , tomaremos como punto final 350 ya que se inicio en 50, entonces al momento de realizar el grafico de los ojos que de altura son 90 , mas la altura de la nariz que es de 100 , mas la altura de la boca de 110 nos da un resultado de 300 por lo que se ve en el ejemplo ya graficado no podemos tomar todo el rostro como base , se tiene espacio entre la parte superior y los ojos, que debemos calcular , para este calculo tomaremos la ejemplificacion del grafico que pareciera ser que la boca inicia desde la mitad del rectángulo del de la nariz , asi que partiendo de esta observacion podemos decir que la suma de las alturas de los rectángulos nos da un total de 250 (ojo = 90 + nariz 100 /2 = 50, boca = 110 ), entonces ese espacio debería de ser de 50 y en el ejemplo de instructor es de 60 que uniformemente esta mal , asi que solo como observacion deberia quedar de esta manera.
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
//cabeza
pincel.fillStyle = 'darkgreen';
pincel.fillRect(200, 50, 350 ,300);
//ojos
pincel.fillStyle = 'black';
pincel.fillRect(250, 100, 90, 90);
pincel.fillRect(410, 100, 90, 90);
//nariz
pincel.fillRect(340, 190, 70, 100);
//boca
pincel.fillRect(300, 240, 40, 110);
pincel.fillRect(410, 240, 40, 110);
