<meta charset="utf-8">
<canvas width="600" height="400"></canvas>
<script type="text/javascript">
var canvas = document.querySelector("canvas");
var pincel = canvas.getContext("2d");
var cores = ["darkgreen", "black"];
var creeper = {
cabeca: {l: 350, a: 300},
olhos: {l: 90, a: 90},
nariz: {l: 70, a: 100},
boca: {l: 40, a: 110}
}
pincel.fillStyle = cores[0];
pincel.fillRect(0, 0, creeper.cabeca.l, creeper.cabeca.a); // cabeça
pincel.fillStyle = cores[1];
pincel.fillRect(50, 50, creeper.olhos.l, creeper.olhos.a); // olho esquerdo
pincel.fillStyle = cores[1];
pincel.fillRect(210, 50, creeper.olhos.l, creeper.olhos.a); // olho direito
pincel.fillStyle = cores[1];
pincel.fillRect(140, 140, creeper.nariz.l, creeper.nariz.a); // nariz
pincel.fillStyle = cores[1];
pincel.fillRect(100, 190, creeper.boca.l, creeper.boca.a); // parte esquerda da boca
pincel.fillStyle = cores[1];
pincel.fillRect(210, 190, creeper.boca.l, creeper.boca.a); // parte direita da boca
</script>