Primeiro, arrisquei imaginar como seriam funções para o desenho, funcionou perfeitamente :D Também corrigi a proporção (adaptando o canvas e definindo o tamanho de cada pixel). Porém ainda não gostei do resultado final, gostaria de usar outro tom de verde, então aqui vem a primeira pergunta: É possível usar coordenadas de cor para defini-las (ex: #81E63E para um verde menos saturado)
E também surge outra dúvida: Tem algum jeito fácil de fazer os diferentes tons de verde do creeper? Ou eu teria de fazer pixel por pixel na programação?
(meu código)
<canvas width = 400 height = 400>
</canvas>
<script>
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
function retangulo(cor, x0, y0, x, y) {
pincel.fillStyle = cor;
pincel.fillRect(x0, y0, x, y);
}
retangulo("green", 0, 0, 400, 400); //cabeça
retangulo("black", 50, 100, 100, 100); //olho esquerdo
retangulo("black", 250, 100, 100, 100); //olho direito
retangulo("black", 150, 200, 100, 150); //centro da boca
retangulo("black", 100, 250, 50, 150); //lado esquerdo da boca
retangulo("black", 250, 250, 50, 150); //lado direito da boca
//cada pixel possui 50x50
</script>
