Desculpe-me Germnna, só vi hoje. Aqui vai o código da cara do Creeper + bandeira do Brasil . Se quiser deslocar a bandeira, é só mudar as coordenadas X, *Y *na linha 31 :
<!-- Desenho da cara do Creeper + bandeira do Brasil -->
<canvas width="1100" height="700"></canvas>
<!--------------------------- Cara do Creeper ------------------------------->
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'lightgray'; // cor de fundo: cinza claro
pincel.fillRect(0, 0, 1100, 700);
pincel.fillStyle = 'darkgreen'; // Retângulo 1 (toda a cabeça)
pincel.fillRect(0,0, 350, 300);
pincel.fillStyle = 'black'; // Retângulo 2 (olhos)
pincel.fillRect(50,50, 90, 90);
pincel.fillStyle = 'black'; // Retângulo 3 (olhos)
pincel.fillRect(210,50, 90, 90);
pincel.fillStyle = 'black'; // Retângulo 4 (nariz)
pincel.fillRect(140,140, 70, 100);
pincel.fillStyle = 'black'; // Retângulo 5 (boca)
pincel.fillRect(100,190, 40, 110);
pincel.fillStyle = 'black'; // Retângulo 6 (boca)
pincel.fillRect(210,190, 40, 110);
</script>
<!--------------------------- Bandeira do Brasil ------------------------------->
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
var x=420, y=250; // ponto inicial da Bandeira do Brasil: altere X e Y para mudar a posição da bandeira.
//------------ desenho do retângulo verde ------------------
pincel.fillStyle = 'green';
pincel.fillRect(x, y, 600, 400);
//------------ desenho do Losango amarelo ------------------
pincel.fillStyle = 'yellow';
pincel.beginPath();
pincel.moveTo(x+300, y+50); // primeiro ponto
pincel.lineTo(x+50,y+200); // segundo ponto
pincel.lineTo(x+300,y+350); // terceiro ponto
pincel.lineTo(x+550,y+200); // quarto ponto
pincel.fill(); // preenche com a cor escolhida acima
//------------ desenho do círculo azul -----------------------
pincel.fillStyle = 'blue';
pincel.beginPath();
pincel.arc(x+300, y+200, 100, 0, 2*Math.PI);
pincel.fill();
</script>
