Acabei confundindo e fiz o desenho centralizado com o canvas, deu um pouco de trabalho mais consegui ;) | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Acabei confundindo e fiz o desenho centralizado com o canvas, deu um pouco de trabalho mais consegui ;)

<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);

pincel.fillStyle = 'darkgreen';
pincel.fillRect(120,50, 350, 300);

// olho esquerdo
pincel.fillStyle = 'black';
pincel.fillRect(170,100, 90, 90);

// olho direto
pincel.fillStyle = 'black';
pincel.fillRect(330,100, 90, 90);

// nariz
pincel.fillStyle = 'black';
pincel.fillRect(260,190, 70, 100);

// boca lado esquerdo
pincel.fillStyle = 'black';
pincel.fillRect(220,240, 40, 110);

// boca lado direito
pincel.fillStyle = 'black';
pincel.fillRect(330,240, 40, 110);



</script>

Mergulhe em programação