<canvas width='600' height='400'>
</canvas>
<script>
var tela = document.querySelector ('canvas'); // Criar tela
var pincel = tela.getContext ('2d'); //getContext >> Tipo de pincel, criação do pincel | 2d >> parametro com a dimensão do gráfico.
// RETANGULO 1 >> 350, 300 (cabeça)
pincel.fillStyle = 'darkgreen';
pincel.fillRect(0, 0, 350, 300);
//1. FAZ O FUNDO VERDE. 0 >> X | 0 >> Y (ponto de inicio) | 350 >> LARGURA | 300 >> ALTURA (DIMENSÃO A PARTIR DO PONTO X E Y)
// RETANGULO 2 >> 90, 90 (olhos).
pincel.fillStyle = 'black';
pincel.fillRect(50, 50, 90, 90);
//3. LARGURA: (140 - 90 = 50) - PS: 140 DO RETANGULO 4 ||| ALTURA: (140 - 90 = 50) - PS: 140 DO RETANGULO 4
// RETANGULO 3 >> 90, 90 (olhos).
pincel.fillStyle = 'black';
pincel.fillRect(210, 50, 90, 90);
//4. LARGURA: (140 + 70 = 210) - PS: DADOS DO RETANGULO 4 ||| ALTURA: (140 - 90 = 50) - PS: 140 DO RETANGULO 4
// RETANGULO 4 >> 70, 100 (nariz)
pincel.fillStyle = 'black';
pincel.fillRect(140, 140, 70, 100);
// 2: Raciocinio >> 350 / 2 = 175. Pois o nariz esta no centro e tem 70 px de comprimento. Entao descobre-se o centro e a partir deste ponto destina-se 35 px para cada lado. Ou seja: inicia em 140 >> (175 - 35 = 140) e vai até 210 px >> (175 + 35 = 210). A ALTURA: O total é de 300 e os retangulos 5 e 6 tem 110 px, e o retangulo 4 tem 100, mas a metade esta dentro do 5 e 6, entao contabilizo apenas 50. Fica assim >> 300 - 110 - 50 = 140 px
// RETANGULO 5 >> 40, 110 (parte da boca).
pincel.fillStyle = 'black';
pincel.fillRect(100, 190, 40, 110);
// LARGURA: X DO RETANGULO 4 >> 140 - 40 PX (RET 5) = 100 ||| COMEÇEI POR AQUI > ALTURA: (ALTURA TOTAL>> 300 - 110 = 190)
// RETANGULO 6 >> 40, 110 (parte da boca).
pincel.fillStyle = 'black';
pincel.fillRect(210, 190, 40, 110);
// LARGURA: RET 4 INICIO X >> 140 + 70 = 210 ||| ALTURA: A MESMA D RETANGULO 5 >> 190
</script>