Olá pessoal,
Fiz com base nas aulas de lógica, duas variáveis para mover X e Y ao centro depois que o desenho estava, pronto.
No final depois de tudo pronto... Agora só preciso mover para o centro. mas putz... vou ter que calcular o X e Y em todos os bloco outra vez... ai pensei nessa solução. Com base nessas variáveis foi possível colocar o desenho em qualquer lugar do Canvas alterando apenas 2 valores.
var centroX = 0
var centroY = 0
Essa solução é uma forma correta de lógica ?
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);
// Ao final mover para o centro.
var centroX = 125;
var centroY = 50;
pincel.fillStyle = 'darkgreen';
pincel.fillRect(centroX + 0, centroY + 0, 350, 300); // 01 cabeça.
pincel.fillStyle = 'black';
pincel.fillRect(centroX + 50, centroY + 60, 90, 90); // 02 olhos
pincel.fillRect(centroX + 210, centroY + 60, 90, 90); // 03 olhos
pincel.fillRect(centroX + 140, centroY + 150, 70, 100); // 04 nariz
pincel.fillRect(centroX + 100, centroY + 190, 40, 110); // 05 boca
pincel.fillRect(centroX + 210, centroY + 190, 40,110); // 06 boca
</script>