<meta charset="UTF-8">
<canvas width="600" height="400"> </canvas>
<script>
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
var pixel = 40;
var margem = 10;
// [largura, altura];
var cabeca = [08 * pixel, 08 * pixel];
var olhos = [02 * pixel, 02 * pixel ];
var nariz = [02 * pixel, 03 * pixel];
var cantosBoca = [01 * pixel, 03 * pixel];
var meioTelaHorizontal = cabeca[0]/2 + margem;
var meioTelaVertical = cabeca[1]/2 + margem - pixel;
var origemCabecaX = meioTelaHorizontal - cabeca[0]/2;
var origemCabecaY = meioTelaVertical - cabeca[1]/2 + pixel;
// Você pode modificar as duas variáveis anteriores para que a cabeça do Creeper fique centralizada na tela, para isso, substitua os valores da cabeca por tela.width e tela.heigth. (Esses dois métodos retornam os valores, width e heigth, que você definiu em <canvas>.)
pincel.fillStyle = "darkgreen";
pincel.fillRect( origemCabecaX,
origemCabecaY,
cabeca[0],
cabeca[1]
);
pincel.fillStyle = "black";
pincel.fillRect( meioTelaHorizontal - (nariz[0]/2) - olhos[0],
meioTelaVertical - olhos[1],
olhos[0],
olhos[1]
);
pincel.fillRect( meioTelaHorizontal + nariz[0]/2,
meioTelaVertical - olhos[1],
olhos[0],
olhos[1]
);
pincel.fillRect( meioTelaHorizontal - nariz[0]/2,
meioTelaVertical,
nariz[0],
nariz[1]
);
pincel.fillRect( meioTelaHorizontal - (nariz[0]/2) - cantosBoca[0],
meioTelaVertical + (nariz[1]/3),
cantosBoca[0],
cantosBoca[1]
);
pincel.fillRect( meioTelaHorizontal + (nariz[0]/2),
meioTelaVertical + (nariz[1]/3),
cantosBoca[0],
cantosBoca[1]
);
</script>