<canvas width="600" height="400"></canvas>
<script>
var canvas = document.querySelector('canvas');
var pencil = canvas.getContext('2d');
pencil.beginPath();
pencil.fillStyle = 'darkgreen';
pencil.fillRect(0,0,8*40,8*40);
pencil.fillStyle = 'green';
pencil.fillRect(8*0,8*15,80,80);//detalle verde ojo izq
pencil.fillRect(8*30,8*0,80,80);//detalle verde ojo der
pencil.fillRect(8*30,8*30,80,80);//detalle boca
pencil.fillStyle = 'black';
pencil.fillRect(8*5,8*5,10*8,10*8);//ojo izq
pencil.fillRect(8*25,8*5,10*8,10*8);//ojo der
pencil.fillRect(8*15,8*15,10*8,15*8);//nariz
pencil.fillRect(8*10,8*20,5*8,15*8);//boca izq
pencil.fillRect(8*25,8*20,5*8,15*8);//boca der
</script>
