Gostaria de saber se há alguma forma de descobrir como achar os pontos inicias de uma maneira mais fácil, consegui chegar no resultado, mas até ai quebrei a cabeça pra achar as posições corretas dos retângulos, tem alguma outra maneira ou é só no olho mesmo?
<canvas width="600" height="400"></canvas>
<script>
var tela= document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'lightGrey';
pincel.fillRect (0, 0 , 600, 400)//fundo
pincel.fillStyle ='green';
pincel.fillRect (120 , 50 , 350 , 300);//cabeça
pincel.fillStyle = 'black';
pincel.fillRect (170,111, 90 , 90);//olhos
pincel.fillRect (330,111,90,90);
pincel.fillSyle = 'black';
pincel.fillRect (260,200,70,100);//nariz
pincel.fillSyle = 'black';
pincel.fillRect (220,240,40, 110);//boca
pincel.fillRect (330 ,240,40,110)
</script>