Não consigo calcular esses pontos no plano cartesiano! | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

/* A cara do Creeper PRÓXIMA ATIVIDADE

O Johann é um menino de 11 anos e adora jogar Minecraft. Minecraft é aquele jogo onde você constrói um mundo com blocos, como se fosse um Lego virtual. Ele gosta tanto que pediu um pôster de uma das personagens principais do jogo: o Creeper.

O Creeper na verdade é um monstro (que explode ao se aproximar de um jogador) e tem mais ou menos essa cara:

Repare que esse desenho é composto de retângulos! Para ser correto são 6 retângulos:

Para facilitar um pouco mais, segue o tamanho (largura, altura) em pixels de cada retângulo:

Retângulo 1: 350, 300 (cabeça). Retângulos 2 e 3: 90, 90 (olhos). Retângulo 4: 70, 100 (nariz). Retângulos 5 e 6: 40, 110 (parte da boca). O seu canvas deve ter o tamanho de 600 x 400 pixels.

Será que você consegue criar essa imagem e desenhar a cabeça do Creeper? Seguem os passos para te guiar melhor:

Criar um novo arquivo, por exemplo creeper.html. Definir a tag canvas. Criar um script com tela e pincel. Desenhar os retângulos através da função fillRect do pincel. Não esquecer de pintar os retângulos, aqui usamos as cores darkgreen e black. Mãos à obra!

Olá Celso esse esse é meu código pra você estudar ... lembrando que a tela tem medidas de 600 por 400 e que x recebe o valor 0 e y também recebe 0 que são o inicio e a medida que se afasta do lado esquerdo a vai para o direto o limite é 600 e de cima para baixo é o y a medida que desce vai até o limite que é 400.

var tela = document.querySelector('canvas'); var pincel = tela.getContext('2d'); //Para obter um objeto desta interface, chama-se getContext() em um elemento <canvas>, adicionando "2d" como argumento. pincel.fillStyle = 'lightgrey'; // define a cor de preenchimento do retângulo pincel.fillRect(0, 0, 600, 400,); // desenha o retângulo na posição 10, 10 com 55 pixels de largura e uma altura de 50. pincel.fillStyle ='white'; //cor pincel.fillRect(95, 45, 360, 310); //Contorno pincel.fillStyle = 'darkgreen'; //cor pincel.fillRect(100, 50, 350, 300); pincel.fillStyle = 'black'; //cor pincel.fillRect(140, 100, 90,90); //olho esquerdo pincel.fillRect(300, 100, 90, 90); //Olho direito pincel.fillRect(230, 190, 70, 100); //Nariz pincel.fillRect( 200, 240, 40, 110); //Parte esqueda da boca pincel.fillRect(300, 240, 40, 110); // Parte direita da boca '''